diff --git a/gulp/ProjectSpecs/ScssStructure/#All.js b/gulp/ProjectSpecs/ScssStructure/#All.js index a80bb00bd9..8996454d30 100644 --- a/gulp/ProjectSpecs/ScssStructure/#All.js +++ b/gulp/ProjectSpecs/ScssStructure/#All.js @@ -1,6 +1,5 @@ // Get the reference file for each section const setupVariables = require('./SetupVariables'); -const functionsAndMixins = require('./Functions&Mixins'); const root = require('./Root'); const resets = require('./Resets'); const htmlElements = require('./HTMLElements'); @@ -19,7 +18,6 @@ const excluders = require('./Excluders'); **/ const cssStructure = { "css-variables-setup": setupVariables.info, - "functions-mixins": functionsAndMixins.info, "root": root.info, "resets": resets.info, "html-elements": htmlElements.info, diff --git a/gulp/ProjectSpecs/ScssStructure/Functions&Mixins.js b/gulp/ProjectSpecs/ScssStructure/Functions&Mixins.js deleted file mode 100644 index b051db6488..0000000000 --- a/gulp/ProjectSpecs/ScssStructure/Functions&Mixins.js +++ /dev/null @@ -1,17 +0,0 @@ -/* -* Section Info -**/ -const sectionInfo = { - "name": "Functions & Mixins", - "addToSectionIndex": false, - - "assets": [ - { - "name": "", - "path": "00-abstract/mixins" - } - ] -}; - -// Expose section info! -exports.info = sectionInfo; diff --git a/gulp/ProjectSpecs/ScssStructure/SetupVariables.js b/gulp/ProjectSpecs/ScssStructure/SetupVariables.js index d22e885f13..44159878ac 100644 --- a/gulp/ProjectSpecs/ScssStructure/SetupVariables.js +++ b/gulp/ProjectSpecs/ScssStructure/SetupVariables.js @@ -2,12 +2,12 @@ * Section Info **/ const sectionInfo = { - "name": "SCSS Setup variables", + "name": "SCSS Setup variables, Functions & Mixins", "addToSectionIndex": false, "assets": [ { - "path": "00-abstract/setup-global-vars" + "path": "00-abstract/index" } ] }; diff --git a/gulp/Tasks/CreateScss/GetPartialsList.js b/gulp/Tasks/CreateScss/GetPartialsList.js index 0385d0d4e0..dfd87e7e24 100644 --- a/gulp/Tasks/CreateScss/GetPartialsList.js +++ b/gulp/Tasks/CreateScss/GetPartialsList.js @@ -15,9 +15,22 @@ function createPartialsListProd(platformType) { return createPartialsList(project.globalConsts.envType.production, platformType); } -// Method used to create the import text -function getImportLineText(text) { - return `@import '${text}';\n`; +// Method used to create the use text +// Loaded 'as *' since this file only aggregates partials for their CSS output and never +// references any of their members by namespace - avoids default-namespace collisions +// between partials that happen to share a basename. +function getUseLineText(text) { + return `@use '${text}' as *;\n`; +} + +// Method used to get the abstracts barrel '@use' line. Must be emitted as the very first +// statement in the generated file - CreateScssFile.js places it ahead of the header/section +// index comments. Dart Sass duplicates a comment that precedes a file's first '@use' once +// for every nested '@use' encountered deeper in the module graph (reproduced empirically: +// every partial '@use'-ing the abstracts barrel added one extra copy of the header comment); +// having a real '@use' as the first statement avoids it entirely. +function getAbstractsUseLine() { + return getUseLineText(scssStructure.structure['css-variables-setup'].assets[0].path); } // Method used to create the section title of each section! @@ -55,6 +68,8 @@ function createPartialsList(env, platformType) { // 0. Go through all the Sections for (const section in scssStructure.structure) { + if (section === 'css-variables-setup') continue; // emitted separately by getAbstractsUseLine() + const sectionInfo = scssStructure.structure[section]; // Create Block comment @@ -82,7 +97,7 @@ function createPartialsList(env, platformType) { // Check if the current asset do not have other assets assigned (Patterns case) if (asset.path !== undefined) { - partialsListText += getImportLineText(asset.path); + partialsListText += getUseLineText(asset.path); } } @@ -98,7 +113,7 @@ function createPartialsList(env, platformType) { } else if (subAsset.key === undefined) { partialsListText += createSectionCommentTitle(`${sectionIndex}.${assetIndex}.${subAssetIndex}. ${subAsset.name}`, 2); - partialsListText += getImportLineText(subAsset.path); + partialsListText += getUseLineText(subAsset.path); } else { // Get the info about the current object key (Pattern) @@ -122,7 +137,7 @@ function createPartialsList(env, platformType) { } if (assetInfo.scss) { - partialsListText += getImportLineText(assetInfo.scss); + partialsListText += getUseLineText(assetInfo.scss); } // Check if the current asset is a group (Ex: DatePicker case) @@ -139,7 +154,7 @@ function createPartialsList(env, platformType) { if (assetItem.scss) { partialsListText += createSectionCommentTitle(`${sectionIndex}.${assetIndex}.${subAssetIndex}.${assetInfoItemIndex} ${assetItem.name}`, 2); - partialsListText += getImportLineText(assetItem.scss); + partialsListText += getUseLineText(assetItem.scss); // Increase AssetItem iteractor assetInfoItemIndex++; @@ -178,4 +193,5 @@ function createPartialsList(env, platformType) { // Expose the IndexSection Text exports.textDev = createPartialsListDev; -exports.textProd = createPartialsListProd; \ No newline at end of file +exports.textProd = createPartialsListProd; +exports.abstractsUseLine = getAbstractsUseLine; \ No newline at end of file diff --git a/gulp/Tasks/CreateScssFile.js b/gulp/Tasks/CreateScssFile.js index 8a48a159da..54c4572a2e 100644 --- a/gulp/Tasks/CreateScssFile.js +++ b/gulp/Tasks/CreateScssFile.js @@ -44,8 +44,10 @@ function getFileText(platformType, envType) { const sectionIndexText = envType === project.globalConsts.envType.production ? getSectionIndexText.textProd(platformType) : getSectionIndexText.textDev(platformType); // Store the Partials List generated text const partialsText = envType === project.globalConsts.envType.production ? getPartialsList.textProd(platformType) : getPartialsList.textDev(platformType); + // The abstracts barrel '@use' must be the file's very first statement, ahead of the + // header comments below - see GetPartialsList.js's getAbstractsUseLine() for why. // Combine text to create the hole file - return `${getNotesText()}\n${sectionIndexText}\n${partialsText}`; + return `${getPartialsList.abstractsUseLine()}\n${getNotesText()}\n${sectionIndexText}\n${partialsText}`; } // Method used to Create SCSS file structure dynamically diff --git a/gulp/Tasks/ScssTranspile.js b/gulp/Tasks/ScssTranspile.js index 557812afba..c642e4b94a 100644 --- a/gulp/Tasks/ScssTranspile.js +++ b/gulp/Tasks/ScssTranspile.js @@ -9,16 +9,6 @@ const rename = require("gulp-rename"); const sass = require('gulp-sass')(require('sass')); const sourcemaps = require('gulp-sourcemaps'); -// Silence known, pre-existing Dart Sass deprecation warnings so the build output -// stays clean and real errors stand out. These are architectural/tooling-level: -// the SCSS uses @import across every partial + the auto-generated entry files -// (migrating to @use/@forward is a separate effort), plus the legacy-js-api -// notice from gulp-sass's renderSync. Requires Dart Sass >= 1.80. -const sassOptions = { - silenceDeprecations: ['import', 'global-builtin', 'if-function', 'legacy-js-api'], - quietDeps: true, -}; - const project = require('../ProjectSpecs/DefaultSpecs'); const distFolder = './dist'; let watchScssThemes = 'src/scss/*.scss'; @@ -48,7 +38,7 @@ function scssTranspile(cb, envMode) { if(envMode === project.globalConsts.envType.development) { gulp.src(watchScssThemes) .pipe(sourcemaps.init()) - .pipe(sass(sassOptions).on('error', sass.logError)) + .pipe(sass().on('error', sass.logError)) .pipe(postcss([postcssdc, postcssdd])) .pipe( autoprefixer({ @@ -64,7 +54,7 @@ function scssTranspile(cb, envMode) { .pipe(gulp.dest(distFolder)); } else { gulp.src(watchScssThemes) - .pipe(sass(sassOptions).on('error', sass.logError)) + .pipe(sass().on('error', sass.logError)) .pipe(postcss([postcssdc, postcssdd])) .pipe(autoprefixer({ overrideBrowserslist: ['last 10 versions'] diff --git a/package.json b/package.json index 67793ee791..e58f2b6bb5 100644 --- a/package.json +++ b/package.json @@ -56,13 +56,11 @@ "eslint": "^8.57.1", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.2.5", - "fancy-log": "^2.0.0", "flatpickr": "^4.6.13", "font-awesome": "^4.7.0", - "gulp": "^4.0.2", + "gulp": "^5.0.1", "gulp-autoprefixer": "^8.0.0", "gulp-clean": "^0.4.0", - "gulp-confirm": "^1.0.8", "gulp-postcss": "^9.1.0", "gulp-remove-empty-lines": "^0.1.0", "gulp-rename": "^2.0.0", @@ -75,7 +73,7 @@ "postcss": "^8.4.38", "postcss-discard-comments": "^5.1.2", "postcss-discard-duplicates": "^5.1.0", - "prettier-eslint": "^12.0.0", + "prettier": "^3.9.6", "prompts": "^2.4.2", "react-router-dom": "^6.30.3", "remark-gfm": "^4.0.1", @@ -92,4 +90,4 @@ "vite": "^6.4.2", "wnumb": "^1.2.0" } -} \ No newline at end of file +} diff --git a/src/scripts/Global.d.ts b/src/scripts/Global.d.ts index ca667bf6e0..3859bd0894 100644 --- a/src/scripts/Global.d.ts +++ b/src/scripts/Global.d.ts @@ -155,10 +155,7 @@ declare global { }; type ProviderConfigs = - | RangeSliderProviderConfigs - | CarouselProviderConfigs - | DatePickerProviderConfigs - | VirtualSelect; + RangeSliderProviderConfigs | CarouselProviderConfigs | DatePickerProviderConfigs | VirtualSelect; // --------------------------------------------------------------------------- // RangeSlider --------------------------------------------------------------- diff --git a/src/scripts/OSFramework/OSUI/Event/DOMEvents/Observers/MutationObserver/Lang/LangObserver.ts b/src/scripts/OSFramework/OSUI/Event/DOMEvents/Observers/MutationObserver/Lang/LangObserver.ts index cbfffd7da0..0d235e5369 100644 --- a/src/scripts/OSFramework/OSUI/Event/DOMEvents/Observers/MutationObserver/Lang/LangObserver.ts +++ b/src/scripts/OSFramework/OSUI/Event/DOMEvents/Observers/MutationObserver/Lang/LangObserver.ts @@ -1,33 +1,33 @@ // eslint-disable-next-line @typescript-eslint/no-unused-vars namespace OSFramework.OSUI.Event.DOMEvents.Observers.MutationObservers.Lang { - // eslint-disable-next-line @typescript-eslint/naming-convention - export class LangObserver extends AbstractMutationObserver { - private _currentLang: string; + // eslint-disable-next-line @typescript-eslint/naming-convention + export class LangObserver extends AbstractMutationObserver { + private _currentLang: string; - constructor() { - super(new LangObserverConfigs(), document.documentElement); - this._currentLang = document.documentElement.lang; - } + constructor() { + super(new LangObserverConfigs(), document.documentElement); + this._currentLang = document.documentElement.lang; + } - /** - * Observer callback method - * - * @param {MutationRecord[]} mutationList - * @memberof LangObserver - */ - public observerHandler(mutationList: MutationRecord[]): void { - mutationList.forEach((mutation) => { - if (mutation.attributeName === GlobalEnum.HTMLAttributes.Lang) { - const mutationTarget = mutation.target as HTMLElement; - const newLang = mutationTarget.lang; + /** + * Observer callback method + * + * @param {MutationRecord[]} mutationList + * @memberof LangObserver + */ + public observerHandler(mutationList: MutationRecord[]): void { + mutationList.forEach((mutation) => { + if (mutation.attributeName === GlobalEnum.HTMLAttributes.Lang) { + const mutationTarget = mutation.target as HTMLElement; + const newLang = mutationTarget.lang; - if (this._currentLang !== newLang) { - this._currentLang = newLang; - - this.trigger(Observers.ObserverEvent.Language, mutation); - } - } - }); - } - } -} \ No newline at end of file + if (this._currentLang !== newLang) { + this._currentLang = newLang; + + this.trigger(Observers.ObserverEvent.Language, mutation); + } + } + }); + } + } +} diff --git a/src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts b/src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts index ed75945215..bbbd2dbab8 100644 --- a/src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts +++ b/src/scripts/OSFramework/OSUI/Feature/Balloon/Balloon.ts @@ -97,12 +97,12 @@ namespace OSFramework.OSUI.Feature.Balloon { this._focusManagerInstance = new Behaviors.FocusManager(); } - // Validates if the feature parent is of parent type - private _isParentType(patternClassName: string) { - return ( - this.featurePattern as unknown as Patterns.AbstractPattern - ).selfElement.classList.contains(patternClassName); - } + // Validates if the feature parent is of parent type + private _isParentType(patternClassName: string) { + return ( + this.featurePattern as unknown as Patterns.AbstractPattern + ).selfElement.classList.contains(patternClassName); + } // Manage the focus of the elements inside the Balloon private _manageFocusInsideBalloon( @@ -213,7 +213,7 @@ namespace OSFramework.OSUI.Feature.Balloon { if (Helper.DeviceInfo.IsMobileDevice === false) { // Will handle the tabindex value of the elements inside pattern Helper.A11Y.SetElementsTabIndex(this.isOpen, this._focusTrapInstance.focusableElements); - } + } Helper.A11Y.RoleDialog(this.featureElem); diff --git a/src/scripts/OSFramework/OSUI/Helper/Language.ts b/src/scripts/OSFramework/OSUI/Helper/Language.ts index f602ac82b4..913951d54b 100644 --- a/src/scripts/OSFramework/OSUI/Helper/Language.ts +++ b/src/scripts/OSFramework/OSUI/Helper/Language.ts @@ -1,7 +1,6 @@ // eslint-disable-next-line @typescript-eslint/no-unused-vars namespace OSFramework.OSUI.Helper { export abstract class Language { - /** * Getter that allows to obtain the App Language based on SetLocale Action from platform! * @@ -11,7 +10,6 @@ namespace OSFramework.OSUI.Helper { * @memberof OSFramework.Helper.Language */ public static get Lang(): string { - if (document.documentElement.lang === undefined) { return Constants.Language.code; } else { diff --git a/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts b/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts index c96d12508b..a40664e9e2 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts +++ b/src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/DropdownServerSide.ts @@ -6,7 +6,8 @@ namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide { OSUIDropdownServerSideConfig, Patterns.DropdownServerSideItem.IDropdownServerSideItem > - implements IDropdownServerSide { + implements IDropdownServerSide + { // Store the HTML element for the DropdownBalloonContainer private _balloonContainerElement: HTMLElement; // Store the Balloon Element diff --git a/src/scripts/OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts b/src/scripts/OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts index 2d04d2d8b4..2faf486433 100644 --- a/src/scripts/OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts +++ b/src/scripts/OSFramework/OSUI/Pattern/TabsHeaderItem/TabsHeaderItem.ts @@ -53,9 +53,13 @@ namespace OSFramework.OSUI.Patterns.TabsHeaderItem { if (Helper.DeviceInfo.IsIos || Helper.DeviceInfo.GetOperatingSystem() === GlobalEnum.MobileOS.MacOS) { Helper.A11Y.RolePresentation(this.selfElement.parentElement); } - + //Prevent tab item to be seen by the browser as submit button - Helper.Dom.Attribute.Set(this.selfElement, GlobalEnum.HTMLAttributes.Type, GlobalEnum.InputTypeAttr.Button); + Helper.Dom.Attribute.Set( + this.selfElement, + GlobalEnum.HTMLAttributes.Type, + GlobalEnum.InputTypeAttr.Button + ); } // Dynamic values that need to be changed when toggling the active state diff --git a/src/scripts/Providers/OSUI/Carousel/Splide/Splide.ts b/src/scripts/Providers/OSUI/Carousel/Splide/Splide.ts index 55f0fd50ef..d8dc55a139 100644 --- a/src/scripts/Providers/OSUI/Carousel/Splide/Splide.ts +++ b/src/scripts/Providers/OSUI/Carousel/Splide/Splide.ts @@ -192,15 +192,23 @@ namespace Providers.OSUI.Carousel.Splide { private _setListRoles(): void { // Remove role="tabpanel" from slides that contain img, ul, ol, or li — elements for // which tabpanel ownership is invalid or creates conflicting semantics - this.selfElement.querySelectorAll(OSFramework.OSUI.Constants.Dot + Enum.CssClass.SplideSlide).forEach((slide) => { - const _slideEl = slide as HTMLElement; - if ( - OSFramework.OSUI.Helper.Dom.Attribute.Get(_slideEl, OSFramework.OSUI.Constants.A11YAttributes.Role.AttrName) === OSFramework.OSUI.Constants.A11YAttributes.Role.TabPanel && - _slideEl.querySelector('img, ul, ol, li') - ) { - OSFramework.OSUI.Helper.Dom.Attribute.Remove(_slideEl, OSFramework.OSUI.Constants.A11YAttributes.Role.AttrName); - } - }); + this.selfElement + .querySelectorAll(OSFramework.OSUI.Constants.Dot + Enum.CssClass.SplideSlide) + .forEach((slide) => { + const _slideEl = slide as HTMLElement; + if ( + OSFramework.OSUI.Helper.Dom.Attribute.Get( + _slideEl, + OSFramework.OSUI.Constants.A11YAttributes.Role.AttrName + ) === OSFramework.OSUI.Constants.A11YAttributes.Role.TabPanel && + _slideEl.querySelector('img, ul, ol, li') + ) { + OSFramework.OSUI.Helper.Dom.Attribute.Remove( + _slideEl, + OSFramework.OSUI.Constants.A11YAttributes.Role.AttrName + ); + } + }); if (this._hasList && this._carouselListWidgetElem) { // Dynamic content: poll until the List widget finishes loading before applying roles diff --git a/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickrConfig.ts b/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickrConfig.ts index 03624076c4..c771c26298 100644 --- a/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickrConfig.ts +++ b/src/scripts/Providers/OSUI/Datepicker/Flatpickr/AbstractFlatpickrConfig.ts @@ -15,7 +15,7 @@ namespace Providers.OSUI.Datepicker.Flatpickr { // Store a integer list of weekdays private _disabledWeekDays = []; - + // Store the language that will be assigned as a locale to the DatePicker private _dynamicLang: string; diff --git a/src/scripts/Providers/OSUI/Datepicker/Flatpickr/IFlatpickr.ts b/src/scripts/Providers/OSUI/Datepicker/Flatpickr/IFlatpickr.ts index a2fc6f1bb5..5902cb1417 100644 --- a/src/scripts/Providers/OSUI/Datepicker/Flatpickr/IFlatpickr.ts +++ b/src/scripts/Providers/OSUI/Datepicker/Flatpickr/IFlatpickr.ts @@ -4,6 +4,7 @@ namespace Providers.OSUI.Datepicker.Flatpickr { * Defines the interface for Datepicker Pattern Based on Flatpickr provider */ export interface IFlatpickr - extends OSFramework.OSUI.Patterns.DatePicker.IDatePicker, + extends + OSFramework.OSUI.Patterns.DatePicker.IDatePicker, OSFramework.OSUI.Interface.IProviderPattern {} } diff --git a/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/AbstractVirtualSelectConfig.ts b/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/AbstractVirtualSelectConfig.ts index 8c04912d7d..22a15f2076 100644 --- a/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/AbstractVirtualSelectConfig.ts +++ b/src/scripts/Providers/OSUI/Dropdown/VirtualSelect/AbstractVirtualSelectConfig.ts @@ -7,8 +7,9 @@ namespace Providers.OSUI.Dropdown.VirtualSelect { * @class AbstractVirtualSelectConfig * @extends {AbstractDropdownConfig} */ - export abstract class AbstractVirtualSelectConfig extends OSFramework.OSUI.Patterns.Dropdown - .AbstractDropdownConfig { + export abstract class AbstractVirtualSelectConfig + extends OSFramework.OSUI.Patterns.Dropdown.AbstractDropdownConfig + { // Store grouped options private _groupedOptionsList: GroupDropDownOption[]; // Store the Provider Options diff --git a/src/scripts/Providers/OSUI/Monthpicker/Flatpickr/IFlatpickrMonth.ts b/src/scripts/Providers/OSUI/Monthpicker/Flatpickr/IFlatpickrMonth.ts index 6f864af711..7c7b25212d 100644 --- a/src/scripts/Providers/OSUI/Monthpicker/Flatpickr/IFlatpickrMonth.ts +++ b/src/scripts/Providers/OSUI/Monthpicker/Flatpickr/IFlatpickrMonth.ts @@ -4,6 +4,7 @@ namespace Providers.OSUI.MonthPicker.Flatpickr { * Defines the interface for MonthPicker Pattern Based on Flatpickr provider */ export interface IFlatpickrMonth - extends OSFramework.OSUI.Patterns.MonthPicker.IMonthPicker, + extends + OSFramework.OSUI.Patterns.MonthPicker.IMonthPicker, OSFramework.OSUI.Interface.IProviderPattern {} } diff --git a/src/scripts/Providers/OSUI/Monthpicker/Flatpickr/l10ns/NextYearBtn.ts b/src/scripts/Providers/OSUI/Monthpicker/Flatpickr/l10ns/NextYearBtn.ts index 412b996112..4aa6fbea4a 100644 --- a/src/scripts/Providers/OSUI/Monthpicker/Flatpickr/l10ns/NextYearBtn.ts +++ b/src/scripts/Providers/OSUI/Monthpicker/Flatpickr/l10ns/NextYearBtn.ts @@ -1,201 +1,201 @@ // eslint-disable-next-line @typescript-eslint/no-unused-vars namespace Providers.OSUI.MonthPicker.Flatpickr.l10ns { - // Store all Next Year aria-label translations - export const NextYearBtn = { - ar: { - ariaLabel: 'السنة التالية', - }, - at: { - ariaLabel: 'Nächstes Jahr', - }, - az: { - ariaLabel: 'Növbəti il', - }, - be: { - ariaLabel: 'Наступны год', - }, - bg: { - ariaLabel: 'Следващата година', - }, - bn: { - ariaLabel: 'পরের বছর', - }, - bs: { - ariaLabel: 'Sljedeća godina', - }, - ca: { - ariaLabel: 'Any següent', - }, - cat: { - ariaLabel: 'Any següent', - }, - ckb: { - ariaLabel: 'ساڵی داهاتوو', - }, - cs: { - ariaLabel: 'Příští rok', - }, - cy: { - ariaLabel: 'Blwyddyn nesaf', - }, - da: { - ariaLabel: 'Næste år', - }, - de: { - ariaLabel: 'Nächstes Jahr', - }, - eo: { - ariaLabel: 'Venonta jaro', - }, - es: { - ariaLabel: 'Año siguiente', - }, - en: { - ariaLabel: 'Next year', - }, - et: { - ariaLabel: 'Järgmine aasta', - }, - fa: { - ariaLabel: 'سال آینده', - }, - fi: { - ariaLabel: 'Seuraava vuosi', - }, - fo: { - ariaLabel: 'Næsta ár', - }, - fr: { - ariaLabel: 'Année suivante', - }, - ga: { - ariaLabel: 'An bhliain seo chugainn', - }, - gr: { - ariaLabel: 'Επόμενο έτος', - }, - he: { - ariaLabel: 'שנה הבאה', - }, - hi: { - ariaLabel: 'अगले वर्ष', - }, - hr: { - ariaLabel: 'Sljedeća godina', - }, - hu: { - ariaLabel: 'Következő év', - }, - hy: { - ariaLabel: 'Հաջորդ տարի', - }, - id: { - ariaLabel: 'Tahun depan', - }, - is: { - ariaLabel: 'Næsta ár', - }, - it: { - ariaLabel: 'Anno successivo', - }, - ja: { - ariaLabel: '来年', - }, - ka: { - ariaLabel: 'მომავალი წელი', - }, - km: { - ariaLabel: 'ឆ្នាំក្រោយ', - }, - ko: { - ariaLabel: '내년', - }, - kz: { - ariaLabel: 'Келесі жыл', - }, - lt: { - ariaLabel: 'Kiti metai', - }, - lv: { - ariaLabel: 'Nākamais gads', - }, - mk: { - ariaLabel: 'Следната година', - }, - mn: { - ariaLabel: 'Дараагийн жил', - }, - ms: { - ariaLabel: 'Tahun depan', - }, - my: { - ariaLabel: 'နောက်နှစ်', - }, - nl: { - ariaLabel: 'Volgend jaar', - }, - nb: { - ariaLabel: 'Neste år', - }, - nn: { - ariaLabel: 'Neste år', - }, - no: { - ariaLabel: 'Neste år', - }, - pa: { - ariaLabel: 'ਅਗਲਾ ਸਾਲ', - }, - pl: { - ariaLabel: 'Następny rok', - }, - pt: { - ariaLabel: 'Ano seguinte', - }, - ro: { - ariaLabel: 'Anul următor', - }, - ru: { - ariaLabel: 'Следующий год', - }, - si: { - ariaLabel: 'ඊළඟ වසර', - }, - sk: { - ariaLabel: 'Budúci rok', - }, - sl: { - ariaLabel: 'Naslednje leto', - }, - sq: { - ariaLabel: 'Viti i ardhshëm', - }, - sr: { - ariaLabel: 'Следећа година', - }, - sv: { - ariaLabel: 'Nästa år', - }, - th: { - ariaLabel: 'ปีหน้า', - }, - tr: { - ariaLabel: 'Gelecek yıl', - }, - uk: { - ariaLabel: 'Наступний рік', - }, - uz: { - ariaLabel: 'Keyingi yil', - }, - vn: { - ariaLabel: 'Năm sau', - }, - zh: { - ariaLabel: '下一年', - }, - zh_tw: { - ariaLabel: '下一年', - }, - }; -} \ No newline at end of file + // Store all Next Year aria-label translations + export const NextYearBtn = { + ar: { + ariaLabel: 'السنة التالية', + }, + at: { + ariaLabel: 'Nächstes Jahr', + }, + az: { + ariaLabel: 'Növbəti il', + }, + be: { + ariaLabel: 'Наступны год', + }, + bg: { + ariaLabel: 'Следващата година', + }, + bn: { + ariaLabel: 'পরের বছর', + }, + bs: { + ariaLabel: 'Sljedeća godina', + }, + ca: { + ariaLabel: 'Any següent', + }, + cat: { + ariaLabel: 'Any següent', + }, + ckb: { + ariaLabel: 'ساڵی داهاتوو', + }, + cs: { + ariaLabel: 'Příští rok', + }, + cy: { + ariaLabel: 'Blwyddyn nesaf', + }, + da: { + ariaLabel: 'Næste år', + }, + de: { + ariaLabel: 'Nächstes Jahr', + }, + eo: { + ariaLabel: 'Venonta jaro', + }, + es: { + ariaLabel: 'Año siguiente', + }, + en: { + ariaLabel: 'Next year', + }, + et: { + ariaLabel: 'Järgmine aasta', + }, + fa: { + ariaLabel: 'سال آینده', + }, + fi: { + ariaLabel: 'Seuraava vuosi', + }, + fo: { + ariaLabel: 'Næsta ár', + }, + fr: { + ariaLabel: 'Année suivante', + }, + ga: { + ariaLabel: 'An bhliain seo chugainn', + }, + gr: { + ariaLabel: 'Επόμενο έτος', + }, + he: { + ariaLabel: 'שנה הבאה', + }, + hi: { + ariaLabel: 'अगले वर्ष', + }, + hr: { + ariaLabel: 'Sljedeća godina', + }, + hu: { + ariaLabel: 'Következő év', + }, + hy: { + ariaLabel: 'Հաջորդ տարի', + }, + id: { + ariaLabel: 'Tahun depan', + }, + is: { + ariaLabel: 'Næsta ár', + }, + it: { + ariaLabel: 'Anno successivo', + }, + ja: { + ariaLabel: '来年', + }, + ka: { + ariaLabel: 'მომავალი წელი', + }, + km: { + ariaLabel: 'ឆ្នាំក្រោយ', + }, + ko: { + ariaLabel: '내년', + }, + kz: { + ariaLabel: 'Келесі жыл', + }, + lt: { + ariaLabel: 'Kiti metai', + }, + lv: { + ariaLabel: 'Nākamais gads', + }, + mk: { + ariaLabel: 'Следната година', + }, + mn: { + ariaLabel: 'Дараагийн жил', + }, + ms: { + ariaLabel: 'Tahun depan', + }, + my: { + ariaLabel: 'နောက်နှစ်', + }, + nl: { + ariaLabel: 'Volgend jaar', + }, + nb: { + ariaLabel: 'Neste år', + }, + nn: { + ariaLabel: 'Neste år', + }, + no: { + ariaLabel: 'Neste år', + }, + pa: { + ariaLabel: 'ਅਗਲਾ ਸਾਲ', + }, + pl: { + ariaLabel: 'Następny rok', + }, + pt: { + ariaLabel: 'Ano seguinte', + }, + ro: { + ariaLabel: 'Anul următor', + }, + ru: { + ariaLabel: 'Следующий год', + }, + si: { + ariaLabel: 'ඊළඟ වසර', + }, + sk: { + ariaLabel: 'Budúci rok', + }, + sl: { + ariaLabel: 'Naslednje leto', + }, + sq: { + ariaLabel: 'Viti i ardhshëm', + }, + sr: { + ariaLabel: 'Следећа година', + }, + sv: { + ariaLabel: 'Nästa år', + }, + th: { + ariaLabel: 'ปีหน้า', + }, + tr: { + ariaLabel: 'Gelecek yıl', + }, + uk: { + ariaLabel: 'Наступний рік', + }, + uz: { + ariaLabel: 'Keyingi yil', + }, + vn: { + ariaLabel: 'Năm sau', + }, + zh: { + ariaLabel: '下一年', + }, + zh_tw: { + ariaLabel: '下一年', + }, + }; +} diff --git a/src/scripts/Providers/OSUI/Monthpicker/Flatpickr/l10ns/PreviousYearBtn.ts b/src/scripts/Providers/OSUI/Monthpicker/Flatpickr/l10ns/PreviousYearBtn.ts index 3fe81ad6a0..d673d88372 100644 --- a/src/scripts/Providers/OSUI/Monthpicker/Flatpickr/l10ns/PreviousYearBtn.ts +++ b/src/scripts/Providers/OSUI/Monthpicker/Flatpickr/l10ns/PreviousYearBtn.ts @@ -1,201 +1,201 @@ // eslint-disable-next-line @typescript-eslint/no-unused-vars namespace Providers.OSUI.MonthPicker.Flatpickr.l10ns { - // Store all Previous Year aria-label translations - export const PreviousYearBtn = { - ar: { - ariaLabel: 'السنة السابقة', - }, - at: { - ariaLabel: 'Vorheriges Jahr', - }, - az: { - ariaLabel: 'Keçən il', - }, - be: { - ariaLabel: 'Папярэдні год', - }, - bg: { - ariaLabel: 'Миналата година', - }, - bn: { - ariaLabel: 'আগের বছর', - }, - bs: { - ariaLabel: 'Prethodna godina', - }, - ca: { - ariaLabel: 'Any anterior', - }, - cat: { - ariaLabel: 'Any anterior', - }, - ckb: { - ariaLabel: 'ساڵی پێشوو', - }, - cs: { - ariaLabel: 'Předchozí rok', - }, - cy: { - ariaLabel: 'Blwyddyn flaenorol', - }, - da: { - ariaLabel: 'Forrige år', - }, - de: { - ariaLabel: 'Vorheriges Jahr', - }, - eo: { - ariaLabel: 'Antaŭa jaro', - }, - es: { - ariaLabel: 'Año anterior', - }, - en: { - ariaLabel: 'Previous year', - }, - et: { - ariaLabel: 'Eelmine aasta', - }, - fa: { - ariaLabel: 'سال گذشته', - }, - fi: { - ariaLabel: 'Edellinen vuosi', - }, - fo: { - ariaLabel: 'Fyrra árið', - }, - fr: { - ariaLabel: 'Année précédente', - }, - ga: { - ariaLabel: 'An bhliain roimhe sin', - }, - gr: { - ariaLabel: 'Προηγούμενο έτος', - }, - he: { - ariaLabel: 'שנה קודמת', - }, - hi: { - ariaLabel: 'पिछला साल', - }, - hr: { - ariaLabel: 'Prošla godina', - }, - hu: { - ariaLabel: 'Előző év', - }, - hy: { - ariaLabel: 'Նախորդ տարi', - }, - id: { - ariaLabel: 'Tahun sebelumnya', - }, - is: { - ariaLabel: 'Fyrra ár', - }, - it: { - ariaLabel: 'Anno precedente', - }, - ja: { - ariaLabel: '前年', - }, - ka: { - ariaLabel: 'წინა წელი', - }, - km: { - ariaLabel: 'ឆ្នាំមុន', - }, - ko: { - ariaLabel: '작년', - }, - kz: { - ariaLabel: 'Өткен жыл', - }, - lt: { - ariaLabel: 'Praėję metai', - }, - lv: { - ariaLabel: 'Iepriekšējais gads', - }, - mk: { - ariaLabel: 'Претходна година', - }, - mn: { - ariaLabel: 'Өмнөх жил', - }, - ms: { - ariaLabel: 'Tahun sebelumnya', - }, - my: { - ariaLabel: 'ယခင်နှစ်', - }, - nl: { - ariaLabel: 'Vorig jaar', - }, - nb: { - ariaLabel: 'Forrige år', - }, - nn: { - ariaLabel: 'Førre året', - }, - no: { - ariaLabel: 'Forrige år', - }, - pa: { - ariaLabel: 'ਪਿਛਲਾ ਸਾਲ', - }, - pl: { - ariaLabel: 'Poprzedni rok', - }, - pt: { - ariaLabel: 'Ano anterior', - }, - ro: { - ariaLabel: 'Anul precedent', - }, - ru: { - ariaLabel: 'Предыдущий год', - }, - si: { - ariaLabel: 'පසුගිය වසර', - }, - sk: { - ariaLabel: 'Predchádzajúci rok', - }, - sl: { - ariaLabel: 'Prejšnje leto', - }, - sq: { - ariaLabel: 'Viti i kaluar', - }, - sr: { - ariaLabel: 'Претходна година', - }, - sv: { - ariaLabel: 'Föregående år', - }, - th: { - ariaLabel: 'ปีก่อนหน้า', - }, - tr: { - ariaLabel: 'Önceki yıl', - }, - uk: { - ariaLabel: 'Попередній рік', - }, - uz: { - ariaLabel: 'O\'tgan yil', - }, - vn: { - ariaLabel: 'Năm trước', - }, - zh: { - ariaLabel: '上一年', - }, - zh_tw: { - ariaLabel: '上一年', - }, - }; -} \ No newline at end of file + // Store all Previous Year aria-label translations + export const PreviousYearBtn = { + ar: { + ariaLabel: 'السنة السابقة', + }, + at: { + ariaLabel: 'Vorheriges Jahr', + }, + az: { + ariaLabel: 'Keçən il', + }, + be: { + ariaLabel: 'Папярэдні год', + }, + bg: { + ariaLabel: 'Миналата година', + }, + bn: { + ariaLabel: 'আগের বছর', + }, + bs: { + ariaLabel: 'Prethodna godina', + }, + ca: { + ariaLabel: 'Any anterior', + }, + cat: { + ariaLabel: 'Any anterior', + }, + ckb: { + ariaLabel: 'ساڵی پێشوو', + }, + cs: { + ariaLabel: 'Předchozí rok', + }, + cy: { + ariaLabel: 'Blwyddyn flaenorol', + }, + da: { + ariaLabel: 'Forrige år', + }, + de: { + ariaLabel: 'Vorheriges Jahr', + }, + eo: { + ariaLabel: 'Antaŭa jaro', + }, + es: { + ariaLabel: 'Año anterior', + }, + en: { + ariaLabel: 'Previous year', + }, + et: { + ariaLabel: 'Eelmine aasta', + }, + fa: { + ariaLabel: 'سال گذشته', + }, + fi: { + ariaLabel: 'Edellinen vuosi', + }, + fo: { + ariaLabel: 'Fyrra árið', + }, + fr: { + ariaLabel: 'Année précédente', + }, + ga: { + ariaLabel: 'An bhliain roimhe sin', + }, + gr: { + ariaLabel: 'Προηγούμενο έτος', + }, + he: { + ariaLabel: 'שנה קודמת', + }, + hi: { + ariaLabel: 'पिछला साल', + }, + hr: { + ariaLabel: 'Prošla godina', + }, + hu: { + ariaLabel: 'Előző év', + }, + hy: { + ariaLabel: 'Նախորդ տարi', + }, + id: { + ariaLabel: 'Tahun sebelumnya', + }, + is: { + ariaLabel: 'Fyrra ár', + }, + it: { + ariaLabel: 'Anno precedente', + }, + ja: { + ariaLabel: '前年', + }, + ka: { + ariaLabel: 'წინა წელი', + }, + km: { + ariaLabel: 'ឆ្នាំមុន', + }, + ko: { + ariaLabel: '작년', + }, + kz: { + ariaLabel: 'Өткен жыл', + }, + lt: { + ariaLabel: 'Praėję metai', + }, + lv: { + ariaLabel: 'Iepriekšējais gads', + }, + mk: { + ariaLabel: 'Претходна година', + }, + mn: { + ariaLabel: 'Өмнөх жил', + }, + ms: { + ariaLabel: 'Tahun sebelumnya', + }, + my: { + ariaLabel: 'ယခင်နှစ်', + }, + nl: { + ariaLabel: 'Vorig jaar', + }, + nb: { + ariaLabel: 'Forrige år', + }, + nn: { + ariaLabel: 'Førre året', + }, + no: { + ariaLabel: 'Forrige år', + }, + pa: { + ariaLabel: 'ਪਿਛਲਾ ਸਾਲ', + }, + pl: { + ariaLabel: 'Poprzedni rok', + }, + pt: { + ariaLabel: 'Ano anterior', + }, + ro: { + ariaLabel: 'Anul precedent', + }, + ru: { + ariaLabel: 'Предыдущий год', + }, + si: { + ariaLabel: 'පසුගිය වසර', + }, + sk: { + ariaLabel: 'Predchádzajúci rok', + }, + sl: { + ariaLabel: 'Prejšnje leto', + }, + sq: { + ariaLabel: 'Viti i kaluar', + }, + sr: { + ariaLabel: 'Претходна година', + }, + sv: { + ariaLabel: 'Föregående år', + }, + th: { + ariaLabel: 'ปีก่อนหน้า', + }, + tr: { + ariaLabel: 'Önceki yıl', + }, + uk: { + ariaLabel: 'Попередній рік', + }, + uz: { + ariaLabel: "O'tgan yil", + }, + vn: { + ariaLabel: 'Năm trước', + }, + zh: { + ariaLabel: '上一年', + }, + zh_tw: { + ariaLabel: '上一年', + }, + }; +} diff --git a/src/scripts/Providers/OSUI/RangeSlider/NoUISlider/AbstractNoUiSliderConfig.ts b/src/scripts/Providers/OSUI/RangeSlider/NoUISlider/AbstractNoUiSliderConfig.ts index ac966b3804..0621980c3a 100644 --- a/src/scripts/Providers/OSUI/RangeSlider/NoUISlider/AbstractNoUiSliderConfig.ts +++ b/src/scripts/Providers/OSUI/RangeSlider/NoUISlider/AbstractNoUiSliderConfig.ts @@ -9,8 +9,9 @@ namespace Providers.OSUI.RangeSlider.NoUiSlider { * @extends {OSFramework.OSUI.Patterns.RangeSlider * .AbstractRangeSliderConfig} */ - export abstract class AbstractNoUiSliderConfig extends OSFramework.OSUI.Patterns.RangeSlider - .AbstractRangeSliderConfig { + export abstract class AbstractNoUiSliderConfig + extends OSFramework.OSUI.Patterns.RangeSlider.AbstractRangeSliderConfig + { // Store the Provider Options private _providerOptions: NoUiSliderOptions; // Store configs set using extensibility diff --git a/src/scripts/Providers/OSUI/RangeSlider/NoUISlider/INoUiSlider.ts b/src/scripts/Providers/OSUI/RangeSlider/NoUISlider/INoUiSlider.ts index e5b65a54b5..d0937e9cfa 100644 --- a/src/scripts/Providers/OSUI/RangeSlider/NoUISlider/INoUiSlider.ts +++ b/src/scripts/Providers/OSUI/RangeSlider/NoUISlider/INoUiSlider.ts @@ -4,6 +4,7 @@ namespace Providers.OSUI.RangeSlider.NoUISlider { * Defines the interface for Range Slider Pattern Based on NoUiSlider provider */ export interface INoUiSlider - extends OSFramework.OSUI.Patterns.RangeSlider.IRangeSlider, + extends + OSFramework.OSUI.Patterns.RangeSlider.IRangeSlider, OSFramework.OSUI.Interface.IProviderPattern {} } diff --git a/src/scripts/Providers/OSUI/Timepicker/Flatpickr/IFlatpickrTime.ts b/src/scripts/Providers/OSUI/Timepicker/Flatpickr/IFlatpickrTime.ts index a0278fdc73..b3836f32a1 100644 --- a/src/scripts/Providers/OSUI/Timepicker/Flatpickr/IFlatpickrTime.ts +++ b/src/scripts/Providers/OSUI/Timepicker/Flatpickr/IFlatpickrTime.ts @@ -4,6 +4,7 @@ namespace Providers.OSUI.TimePicker.Flatpickr { * Defines the interface for Timepicker Pattern Based on Flatpickr provider */ export interface IFlatpickrTime - extends OSFramework.OSUI.Patterns.TimePicker.ITimePicker, + extends + OSFramework.OSUI.Patterns.TimePicker.ITimePicker, OSFramework.OSUI.Interface.IProviderPattern {} } diff --git a/src/scss/00-abstract/_index.scss b/src/scss/00-abstract/_index.scss new file mode 100644 index 0000000000..168ca669b3 --- /dev/null +++ b/src/scss/00-abstract/_index.scss @@ -0,0 +1,2 @@ +@forward 'mixins'; +@forward 'setup-global-vars'; diff --git a/src/scss/00-abstract/_mixins.scss b/src/scss/00-abstract/_mixins.scss index 38320fce80..0d892c8778 100644 --- a/src/scss/00-abstract/_mixins.scss +++ b/src/scss/00-abstract/_mixins.scss @@ -1,3 +1,7 @@ +@use "sass:map"; +@use "sass:string"; +@use "../tokens/variables"; + //// /// @group global @@ -5,41 +9,41 @@ /// @param {String} $side - The side (top, right, bottom, left) /// @return {String} - The max() expression with env() and CSS variable fallback @function safe-area($side) { - @return unquote('max(env(safe-area-inset-#{$side}), var(--safe-area-inset-#{$side}, 0px))'); + @return string.unquote('max(env(safe-area-inset-#{$side}), var(--safe-area-inset-#{$side}, 0px))'); } /// Returns the safe area top value for specifically for Android devices. /// @return {String} - The max() expression with current variable and new CSS variable @function android-safe-area-top() { - @return unquote('max(var(--status-bar-height, 0px), var(--safe-area-inset-top, 0px))'); + @return string.unquote('max(var(--status-bar-height, 0px), var(--safe-area-inset-top, 0px))'); } /// default outline style @mixin a11y-default-outline($isInner: false) { @if $isInner { - box-shadow: inset 0 0 0 $token-border-size-075 $token-primitives-yellow-500; + box-shadow: inset 0 0 0 variables.$token-border-size-075 variables.$token-primitives-yellow-500; } @else { - box-shadow: 0 0 0 $token-border-size-075 $token-primitives-yellow-500; + box-shadow: 0 0 0 variables.$token-border-size-075 variables.$token-primitives-yellow-500; } } /// outline style for high contrast mode -@mixin a11y-high-contrast-outline($isBorder: false, $size: $token-border-size-075, $borderType: 'all') { +@mixin a11y-high-contrast-outline($isBorder: false, $size: variables.$token-border-size-075, $borderType: 'all') { @if $isBorder == false { - outline: $size solid $token-primitives-yellow-500; + outline: $size solid variables.$token-primitives-yellow-500; } @else { @if $borderType == 'all' { - border: $size solid $token-primitives-yellow-500; + border: $size solid variables.$token-primitives-yellow-500; } @else { - border-#{$borderType}: $size solid $token-primitives-yellow-500; + border-#{$borderType}: $size solid variables.$token-primitives-yellow-500; } } } /// AppLogo @mixin app-logo { - border-radius: $token-border-radius-100; - margin-right: $token-scale-200; + border-radius: variables.$token-border-radius-100; + margin-right: variables.$token-scale-200; max-height: var(--size-header); max-width: 120px; } @@ -67,13 +71,13 @@ /// Consumer may still override individual properties after the @include. /// @param {Map} $role - A $token-*-* role map (e.g. $token-heading-h1-semi-bold) @mixin apply-typography($role) { - font-size: map-get($role, font-size); - font-style: map-get($role, font-style); - font-weight: map-get($role, font-weight); - letter-spacing: map-get($role, letter-spacing); - line-height: map-get($role, line-height); - text-transform: map-get($role, text-transform); - text-decoration: map-get($role, text-decoration); + font-size: map.get($role, font-size); + font-style: map.get($role, font-style); + font-weight: map.get($role, font-weight); + letter-spacing: map.get($role, letter-spacing); + line-height: map.get($role, line-height); + text-transform: map.get($role, text-transform); + text-decoration: map.get($role, text-decoration); } /// Emits the desktop rule at the current selector, plus optional diff --git a/src/scss/00-abstract/_setup-global-vars.scss b/src/scss/00-abstract/_setup-global-vars.scss index ae22d780fd..fcde9a9f6f 100644 --- a/src/scss/00-abstract/_setup-global-vars.scss +++ b/src/scss/00-abstract/_setup-global-vars.scss @@ -2,7 +2,7 @@ /// @group SCSS_Setup_Global_Variables // Design token SCSS variables (generated by outsystems-design-tokens) -@import '../tokens/variables'; +@use '../tokens/variables'; /* ---------------------------------------------------------------------------- */ /* Token bridges — tokens used in OSUI but not yet in the design-token package */ @@ -25,7 +25,9 @@ $footer-height: 0px; $osui-devices: 'phone', 'tablet', 'desktop'; $osui-box-sides: 'top', 'right', 'bottom', 'left'; $osui-box-corners: 'top-left', 'top-right', 'bottom-right', 'bottom-left'; -$osui-border-radius-box-sides: 'top' 'left' 'right', 'bottom' 'left' 'right'; +$osui-border-radius-box-sides: + 'top' 'left' 'right', + 'bottom' 'left' 'right'; /* ---------------------------------------------------------------------------- */ /* Utility-class name lists — iterated by @each; values pulled from companion */ @@ -43,47 +45,47 @@ $osui-typography-weight: 'light', 'regular', 'semi-bold', 'bold'; // consume it. Other $osui-*-token-vars maps live alongside their sole // consumer in 05-useful. $osui-space-token-vars: ( - 'none': $token-scale-0, - 'xs': $token-scale-100, - 's': $token-scale-200, - 'base': $token-scale-400, - 'm': $token-scale-600, - 'l': $token-scale-800, - 'xl': $token-scale-1000, - 'xxl': $token-scale-1200, + 'none': variables.$token-scale-0, + 'xs': variables.$token-scale-100, + 's': variables.$token-scale-200, + 'base': variables.$token-scale-400, + 'm': variables.$token-scale-600, + 'l': variables.$token-scale-800, + 'xl': variables.$token-scale-1000, + 'xxl': variables.$token-scale-1200, ); /* ---------------------------------------------------------------------------- */ /* Colors — token-backed maps for utility class generation */ -/* Values are $token-primitives-* / $token-semantics-* SCSS variables that */ +/* Values are variables.$token-primitives-* / variables.$token-semantics-* SCSS variables that */ /* expand to `var(--token-*, fallback)` at compile time. Apps can override the */ /* CSS custom property to re-skin all generated utility classes at once. */ /* ---------------------------------------------------------------------------- */ -// Neutral scale — closest-hex match against $token-primitives-neutral-* +// Neutral scale — closest-hex match against variables.$token-primitives-neutral-* $osui-colors-neutral: - '0' $token-primitives-base-white, - '1' $token-primitives-neutral-100, - '2' $token-primitives-neutral-200, - '3' $token-primitives-neutral-300, - '4' $token-primitives-neutral-400, - '5' $token-primitives-neutral-400, - '6' $token-primitives-neutral-500, - '7' $token-primitives-neutral-700, - '8' $token-primitives-neutral-900, - '9' $token-primitives-neutral-1100, - '10' $token-primitives-base-black; + '0' variables.$token-primitives-base-white, + '1' variables.$token-primitives-neutral-100, + '2' variables.$token-primitives-neutral-200, + '3' variables.$token-primitives-neutral-300, + '4' variables.$token-primitives-neutral-400, + '5' variables.$token-primitives-neutral-400, + '6' variables.$token-primitives-neutral-500, + '7' variables.$token-primitives-neutral-700, + '8' variables.$token-primitives-neutral-900, + '9' variables.$token-primitives-neutral-1100, + '10' variables.$token-primitives-base-black; -// Semantic palette — binds to $token-semantics-* base/100 tokens +// Semantic palette — binds to variables.$token-semantics-* base/100 tokens $osui-colors-semantic: - 'error-light' $token-semantics-danger-100, - 'error' $token-semantics-danger-base, - 'warning-light' $token-semantics-warning-100, - 'warning' $token-primitives-yellow-700, - 'success-light' $token-semantics-success-100, - 'success' $token-semantics-success-base, - 'info-light' $token-semantics-info-100, - 'info' $token-semantics-info-base; + 'error-light' variables.$token-semantics-danger-100, + 'error' variables.$token-semantics-danger-base, + 'warning-light' variables.$token-semantics-warning-100, + 'warning' variables.$token-primitives-yellow-700, + 'success-light' variables.$token-semantics-success-100, + 'success' variables.$token-semantics-success-base, + 'info-light' variables.$token-semantics-info-100, + 'info' variables.$token-semantics-info-base; // Extended palette — 12 families × 7 shades. The '' (base) and 'lightest' // shades bind to component bg tokens per the Figma Badge spec: families with @@ -92,126 +94,127 @@ $osui-colors-semantic: // intermediate shades keep their closest-ranked primitives (no component // token exists for them). // `grape` key preserved for backward-compat utility class names, but binds -// to `$token-primitives-purple-*` per token package naming (see D6). +// to `variables.$token-primitives-purple-*` per token package naming (see D6). // `cyan` binds to `aqua` primitives on base/lightest (per Figma) and to the // closest `teal` primitives on the intermediate shades. -$osui-colors-extended: 'red' +$osui-colors-extended: + 'red' ( - 'lightest' $token-bg-danger-subtle-default, - 'lighter' $token-primitives-red-300, - 'light' $token-primitives-red-500, - '' $token-bg-danger-base-default, - 'dark' $token-primitives-red-800, - 'darker' $token-primitives-red-900, - 'darkest' $token-primitives-red-1000 + 'lightest' variables.$token-bg-danger-subtle-default, + 'lighter' variables.$token-primitives-red-300, + 'light' variables.$token-primitives-red-500, + '' variables.$token-bg-danger-base-default, + 'dark' variables.$token-primitives-red-800, + 'darker' variables.$token-primitives-red-900, + 'darkest' variables.$token-primitives-red-1000 ), 'orange' ( - 'lightest' $token-bg-extended-orange-subtle-default, - 'lighter' $token-primitives-orange-300, - 'light' $token-primitives-orange-500, - '' $token-bg-extended-orange-base-default, - 'dark' $token-primitives-orange-800, - 'darker' $token-primitives-orange-900, - 'darkest' $token-primitives-orange-1000 + 'lightest' variables.$token-bg-extended-orange-subtle-default, + 'lighter' variables.$token-primitives-orange-300, + 'light' variables.$token-primitives-orange-500, + '' variables.$token-bg-extended-orange-base-default, + 'dark' variables.$token-primitives-orange-800, + 'darker' variables.$token-primitives-orange-900, + 'darkest' variables.$token-primitives-orange-1000 ), 'yellow' ( - 'lightest' $token-bg-warning-subtle-default, - 'lighter' $token-primitives-yellow-300, - 'light' $token-primitives-yellow-500, - '' $token-bg-warning-base-default, - 'dark' $token-primitives-yellow-800, - 'darker' $token-primitives-yellow-900, - 'darkest' $token-primitives-yellow-1000 + 'lightest' variables.$token-bg-warning-subtle-default, + 'lighter' variables.$token-primitives-yellow-300, + 'light' variables.$token-primitives-yellow-500, + '' variables.$token-bg-warning-base-default, + 'dark' variables.$token-primitives-yellow-800, + 'darker' variables.$token-primitives-yellow-900, + 'darkest' variables.$token-primitives-yellow-1000 ), 'lime' ( - 'lightest' $token-bg-extended-lime-subtle-default, - 'lighter' $token-primitives-lime-300, - 'light' $token-primitives-lime-500, - '' $token-bg-extended-lime-base-default, - 'dark' $token-primitives-lime-800, - 'darker' $token-primitives-lime-900, - 'darkest' $token-primitives-lime-1000 + 'lightest' variables.$token-bg-extended-lime-subtle-default, + 'lighter' variables.$token-primitives-lime-300, + 'light' variables.$token-primitives-lime-500, + '' variables.$token-bg-extended-lime-base-default, + 'dark' variables.$token-primitives-lime-800, + 'darker' variables.$token-primitives-lime-900, + 'darkest' variables.$token-primitives-lime-1000 ), 'green' ( - 'lightest' $token-bg-success-subtle-default, - 'lighter' $token-primitives-green-300, - 'light' $token-primitives-green-500, - '' $token-bg-success-base-default, - 'dark' $token-primitives-green-800, - 'darker' $token-primitives-green-900, - 'darkest' $token-primitives-green-1000 + 'lightest' variables.$token-bg-success-subtle-default, + 'lighter' variables.$token-primitives-green-300, + 'light' variables.$token-primitives-green-500, + '' variables.$token-bg-success-base-default, + 'dark' variables.$token-primitives-green-800, + 'darker' variables.$token-primitives-green-900, + 'darkest' variables.$token-primitives-green-1000 ), 'teal' ( - 'lightest' $token-bg-extended-teal-subtle-default, - 'lighter' $token-primitives-teal-300, - 'light' $token-primitives-teal-500, - '' $token-bg-extended-teal-base-default, - 'dark' $token-primitives-teal-800, - 'darker' $token-primitives-teal-900, - 'darkest' $token-primitives-teal-1000 + 'lightest' variables.$token-bg-extended-teal-subtle-default, + 'lighter' variables.$token-primitives-teal-300, + 'light' variables.$token-primitives-teal-500, + '' variables.$token-bg-extended-teal-base-default, + 'dark' variables.$token-primitives-teal-800, + 'darker' variables.$token-primitives-teal-900, + 'darkest' variables.$token-primitives-teal-1000 ), 'cyan' ( - 'lightest' $token-primitives-aqua-100, - 'lighter' $token-primitives-teal-300, - 'light' $token-primitives-teal-500, - '' $token-primitives-aqua-900, - 'dark' $token-primitives-teal-800, - 'darker' $token-primitives-teal-900, - 'darkest' $token-primitives-teal-1000 + 'lightest' variables.$token-primitives-aqua-100, + 'lighter' variables.$token-primitives-teal-300, + 'light' variables.$token-primitives-teal-500, + '' variables.$token-primitives-aqua-900, + 'dark' variables.$token-primitives-teal-800, + 'darker' variables.$token-primitives-teal-900, + 'darkest' variables.$token-primitives-teal-1000 ), 'blue' ( - 'lightest' $token-bg-info-subtle-default, - 'lighter' $token-primitives-blue-300, - 'light' $token-primitives-blue-500, - '' $token-bg-info-base-default, - 'dark' $token-primitives-blue-800, - 'darker' $token-primitives-blue-900, - 'darkest' $token-primitives-blue-1000 + 'lightest' variables.$token-bg-info-subtle-default, + 'lighter' variables.$token-primitives-blue-300, + 'light' variables.$token-primitives-blue-500, + '' variables.$token-bg-info-base-default, + 'dark' variables.$token-primitives-blue-800, + 'darker' variables.$token-primitives-blue-900, + 'darkest' variables.$token-primitives-blue-1000 ), 'indigo' ( - 'lightest' $token-bg-extended-indigo-subtle-default, - 'lighter' $token-primitives-indigo-300, - 'light' $token-primitives-indigo-500, - '' $token-bg-extended-indigo-base-default, - 'dark' $token-primitives-indigo-800, - 'darker' $token-primitives-indigo-900, - 'darkest' $token-primitives-indigo-1000 + 'lightest' variables.$token-bg-extended-indigo-subtle-default, + 'lighter' variables.$token-primitives-indigo-300, + 'light' variables.$token-primitives-indigo-500, + '' variables.$token-bg-extended-indigo-base-default, + 'dark' variables.$token-primitives-indigo-800, + 'darker' variables.$token-primitives-indigo-900, + 'darkest' variables.$token-primitives-indigo-1000 ), 'violet' ( - 'lightest' $token-bg-extended-violet-subtle-default, - 'lighter' $token-primitives-violet-300, - 'light' $token-primitives-violet-500, - '' $token-bg-extended-violet-base-default, - 'dark' $token-primitives-violet-800, - 'darker' $token-primitives-violet-900, - 'darkest' $token-primitives-violet-1000 + 'lightest' variables.$token-bg-extended-violet-subtle-default, + 'lighter' variables.$token-primitives-violet-300, + 'light' variables.$token-primitives-violet-500, + '' variables.$token-bg-extended-violet-base-default, + 'dark' variables.$token-primitives-violet-800, + 'darker' variables.$token-primitives-violet-900, + 'darkest' variables.$token-primitives-violet-1000 ), 'grape' ( - 'lightest' $token-primitives-purple-100, - 'lighter' $token-primitives-purple-300, - 'light' $token-primitives-purple-500, - '' $token-primitives-purple-800, - 'dark' $token-primitives-purple-800, - 'darker' $token-primitives-purple-900, - 'darkest' $token-primitives-purple-1000 + 'lightest' variables.$token-primitives-purple-100, + 'lighter' variables.$token-primitives-purple-300, + 'light' variables.$token-primitives-purple-500, + '' variables.$token-primitives-purple-800, + 'dark' variables.$token-primitives-purple-800, + 'darker' variables.$token-primitives-purple-900, + 'darkest' variables.$token-primitives-purple-1000 ), 'pink' ( - 'lightest' $token-bg-extended-pink-subtle-default, - 'lighter' $token-primitives-pink-300, - 'light' $token-primitives-pink-500, - '' $token-bg-extended-pink-base-default, - 'dark' $token-primitives-pink-800, - 'darker' $token-primitives-pink-900, - 'darkest' $token-primitives-pink-1000 + 'lightest' variables.$token-bg-extended-pink-subtle-default, + 'lighter' variables.$token-primitives-pink-300, + 'light' variables.$token-primitives-pink-500, + '' variables.$token-bg-extended-pink-base-default, + 'dark' variables.$token-primitives-pink-800, + 'darker' variables.$token-primitives-pink-900, + 'darkest' variables.$token-primitives-pink-1000 ); diff --git a/src/scss/01-foundations/_html-elements-headings.scss b/src/scss/01-foundations/_html-elements-headings.scss index 0a285ef044..d9034aaf87 100644 --- a/src/scss/01-foundations/_html-elements-headings.scss +++ b/src/scss/01-foundations/_html-elements-headings.scss @@ -1,3 +1,7 @@ +@use "sass:list"; +@use '../00-abstract/index' as *; +@use "../tokens/variables"; + /* HTML Elements - Headings */ //// /// @group HTML_Elements-Headings @@ -6,12 +10,12 @@ // Maps heading level → (desktop, tablet, phone) role triples. // Tier values that equal the previous tier mean "inherit" and emit nothing. $osui-heading-tiers: ( - 1: ($token-heading-h1-semi-bold, $token-heading-h2-semi-bold, $token-heading-h2-semi-bold), - 2: ($token-heading-h2-semi-bold, $token-heading-h2-semi-bold, $token-heading-h3-semi-bold), - 3: ($token-heading-h3-semi-bold, $token-heading-h3-semi-bold, $token-heading-h4-semi-bold), - 4: ($token-heading-h4-semi-bold, $token-heading-h4-semi-bold, $token-heading-h5-semi-bold), - 5: ($token-heading-h5-semi-bold, $token-heading-h5-semi-bold, $token-heading-h6-semi-bold), - 6: ($token-heading-h6-semi-bold, $token-heading-h6-semi-bold, $token-heading-h6-semi-bold), + 1: (variables.$token-heading-h1-semi-bold, variables.$token-heading-h2-semi-bold, variables.$token-heading-h2-semi-bold), + 2: (variables.$token-heading-h2-semi-bold, variables.$token-heading-h2-semi-bold, variables.$token-heading-h3-semi-bold), + 3: (variables.$token-heading-h3-semi-bold, variables.$token-heading-h3-semi-bold, variables.$token-heading-h4-semi-bold), + 4: (variables.$token-heading-h4-semi-bold, variables.$token-heading-h4-semi-bold, variables.$token-heading-h5-semi-bold), + 5: (variables.$token-heading-h5-semi-bold, variables.$token-heading-h5-semi-bold, variables.$token-heading-h6-semi-bold), + 6: (variables.$token-heading-h6-semi-bold, variables.$token-heading-h6-semi-bold, variables.$token-heading-h6-semi-bold), ); /// Shared default for every heading element and utility class @@ -33,9 +37,9 @@ h6, /// Per-level responsive rules — desktop baseline + optional .tablet / .phone overrides @each $level, $tiers in $osui-heading-tiers { - $desktop: nth($tiers, 1); - $tablet: nth($tiers, 2); - $phone: nth($tiers, 3); + $desktop: list.nth($tiers, 1); + $tablet: list.nth($tiers, 2); + $phone: list.nth($tiers, 3); h#{$level}, .heading#{$level}, @@ -47,8 +51,8 @@ h6, /// Display — uses display role maps, not heading roles .font-size-display { @include apply-typography-responsive( - $desktop: $token-display-lg-regular, - $tablet: $token-display-sm-regular, - $phone: $token-display-sm-regular + $desktop: variables.$token-display-lg-regular, + $tablet: variables.$token-display-sm-regular, + $phone: variables.$token-display-sm-regular ); } diff --git a/src/scss/01-foundations/_html-elements-link.scss b/src/scss/01-foundations/_html-elements-link.scss index 584f7394ab..77f88362d2 100644 --- a/src/scss/01-foundations/_html-elements-link.scss +++ b/src/scss/01-foundations/_html-elements-link.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* HTML Elements - Links */ //// /// @group HTML_Elements-Link @@ -11,13 +13,13 @@ a { &, &:visited { - color: $token-semantics-primary-base; + color: variables.$token-semantics-primary-base; transition: all 180ms linear; } &:hover, &:focus { - color: $token-semantics-primary-900; + color: variables.$token-semantics-primary-900; text-decoration: underline; } diff --git a/src/scss/01-foundations/_icon-library-odc.scss b/src/scss/01-foundations/_icon-library-odc.scss index b8206e8d24..e0720e72f9 100644 --- a/src/scss/01-foundations/_icon-library-odc.scss +++ b/src/scss/01-foundations/_icon-library-odc.scss @@ -1,3 +1,5 @@ +@use '../tokens/variables'; + //// /// @group Root /// Icon library CSS variables (FontAwesome vs Phosphor) and component overrides. @@ -123,7 +125,7 @@ body.iconLibrary-phosphor { // Submenu – header arrow .osui-submenu { &__header__icon { - margin-inline-start: $token-scale-200; + margin-inline-start: variables.$token-scale-200; transition: transform 200ms ease; transform-origin: center; @@ -143,26 +145,26 @@ body.iconLibrary-phosphor { // Dropdown Widget .dropdown-container:after { align-items: center; - color: var(--osui-dropdown-arrow-color, #{$token-icon-subtlest}); + color: var(--osui-dropdown-arrow-color, #{variables.$token-icon-subtlest}); content: var(--osui-icon-arrow-down); cursor: pointer; display: flex; font-family: var(--osui-icon-font-family); - font-size: var(--osui-dropdown-arrow-size, #{$token-scale-400}); - height: var(--osui-dropdown-arrow-size, #{$token-scale-400}); + font-size: var(--osui-dropdown-arrow-size, #{variables.$token-scale-400}); + height: var(--osui-dropdown-arrow-size, #{variables.$token-scale-400}); justify-content: center; line-height: 1; pointer-events: none; position: absolute; - right: $token-scale-400; + right: variables.$token-scale-400; top: 50%; transform: translateY(-50%); transition: transform 200ms ease; - width: var(--osui-dropdown-arrow-size, #{$token-scale-400}); + width: var(--osui-dropdown-arrow-size, #{variables.$token-scale-400}); } .is-rtl .dropdown-container:after { - left: $token-scale-400; + left: variables.$token-scale-400; right: auto; } @@ -179,11 +181,11 @@ body.iconLibrary-phosphor { display: inline-flex; flex-direction: column; font-family: var(--osui-icon-font-family); - font-size: $token-font-size-300; + font-size: variables.$token-font-size-300; height: 11px; justify-content: center; line-height: 0.5; // compress each glyph's line-box so the up/down chevrons stack without overlapping - margin-left: $token-scale-200; + margin-left: variables.$token-scale-200; position: relative; vertical-align: middle; width: 10px; @@ -204,7 +206,7 @@ body.iconLibrary-phosphor { &:after { content: var(--osui-icon-chevron-left); font-family: var(--osui-icon-font-family); - font-size: $token-font-size-450; + font-size: variables.$token-font-size-450; } } @@ -262,7 +264,7 @@ body.iconLibrary-phosphor { // ChatMessage .chat-message-wrapper .chat-message-status { display: inline-flex; - gap: $token-scale-100; + gap: variables.$token-scale-100; padding: none; } @@ -303,7 +305,7 @@ body.iconLibrary-phosphor { .osui-dropdown-serverside__selected-values:after { content: var(--osui-icon-arrow-down); font-family: var(--osui-icon-font-family); - font-size: var(--osui-dropdown-ss-arrow-size, #{$token-scale-400}); + font-size: var(--osui-dropdown-ss-arrow-size, #{variables.$token-scale-400}); } // DropdownSearch (VirtualSelect) @@ -321,7 +323,6 @@ body.iconLibrary-phosphor { .vscomp-search-clear:after, .vscomp-ele .vscomp-clear-icon:after { - color: $token-icon-subtlest; content: var(--osui-icon-clear); font-size: 13px; } @@ -330,13 +331,13 @@ body.iconLibrary-phosphor { border: none; content: var(--osui-icon-checkbox-checked); font-family: var(--osui-icon-font-family); - color: $token-primitives-base-white; + color: variables.$token-primitives-base-white; transform: none !important; // !important required to override the element from provider position: absolute; width: 100%; height: 100%; top: 1px; - font-size: $token-font-size-300; + font-size: variables.$token-font-size-300; line-height: 1; display: flex; left: 1px; @@ -350,16 +351,16 @@ body.iconLibrary-phosphor { .osui-dropdown-search { // Service Studio Preview &-ss-preview { - -servicestudio-background-color: $token-primitives-base-white; - -servicestudio-border-radius: $token-border-radius-200; - -servicestudio-border: $token-border-size-025 solid $token-primitives-neutral-500; - -servicestudio-color: $token-text-subtlest; + -servicestudio-background-color: variables.$token-primitives-base-white; + -servicestudio-border-radius: variables.$token-border-radius-200; + -servicestudio-border: variables.$token-border-size-025 solid variables.$token-primitives-neutral-500; + -servicestudio-color: variables.$token-text-subtlest; -servicestudio-display: inline-flex; -servicestudio-justify-content: space-between; -servicestudio-height: 40px; -servicestudio-line-height: 40px; -servicestudio-min-width: 180px; - -servicestudio-padding: 0 $token-space-400; + -servicestudio-padding: 0 variables.$token-scale-400; -servicestudio-position: relative; -servicestudio-vertical-align: middle; -servicestudio-width: 100%; @@ -370,14 +371,14 @@ body.iconLibrary-phosphor { -servicestudio-width: 12px; &::after { - -servicestudio-color: $token-primitives-neutral-700; + -servicestudio-color: variables.$token-primitives-neutral-700; -servicestudio-position: absolute; -servicestudio-top: 50%; -servicestudio-left: 0; -servicestudio-content: var(--osui-icon-arrow-down); -servicestudio-font-family: var(--osui-icon-font-family); -servicestudio-transform: translateY(-50%); - -servicestudio-font-size: $token-font-size-500; + -servicestudio-font-size: variables.$token-font-size-500; } } } @@ -387,14 +388,14 @@ body.iconLibrary-phosphor { // Service Studio Preview &-ss-preview { -servicestudio-justify-content: space-between; - -servicestudio-background-color: $token-primitives-base-white; - -servicestudio-border-radius: $token-border-radius-200; - -servicestudio-border: $token-border-size-025 solid $token-primitives-neutral-500; - -servicestudio-color: $token-text-subtlest; + -servicestudio-background-color: variables.$token-primitives-base-white; + -servicestudio-border-radius: variables.$token-border-radius-200; + -servicestudio-border: variables.$token-border-size-025 solid variables.$token-primitives-neutral-500; + -servicestudio-color: variables.$token-text-subtlest; -servicestudio-display: flex; -servicestudio-height: 40px; -servicestudio-min-width: 180px; - -servicestudio-padding: 0 $token-space-400; + -servicestudio-padding: 0 variables.$token-scale-400; -servicestudio-position: relative; -servicestudio-vertical-align: middle; -servicestudio-width: 100%; @@ -403,15 +404,17 @@ body.iconLibrary-phosphor { &-as-tag { -servicestudio-align-items: center; -servicestudio-justify-content: space-between; - -servicestudio-background-color: $token-primitives-neutral-300; + -servicestudio-background-color: variables.$token-primitives-neutral-300; -servicestudio-border-radius: 30px; - -servicestudio-color: $token-primitives-neutral-700; + -servicestudio-color: variables.$token-primitives-neutral-700; -servicestudio-display: flex; - -servicestudio-font-size: $token-font-size-350; - -servicestudio-font-weight: $token-font-weight-semi-bold; + -servicestudio-font-size: variables.$token-font-size-350; + -servicestudio-font-weight: variables.$token-font-weight-semi-bold; -servicestudio-height: 30px; -servicestudio-padding: 8px; -servicestudio-position: relative; + -servicestudio-top: 50%; + -servicestudio-transform: translateY(-50%); -servicestudio-width: 70px; &__clear-icon { @@ -430,9 +433,9 @@ body.iconLibrary-phosphor { &__arrow-icon { -servicestudio-align-self: center; - -servicestudio-color: $token-primitives-neutral-700; + -servicestudio-color: variables.$token-primitives-neutral-700; -servicestudio-position: relative; - -servicestudio-font-size: $token-font-size-500; + -servicestudio-font-size: variables.$token-font-size-500; -servicestudio-font-weight: normal; -servicestudio-width: 12px; @@ -456,11 +459,10 @@ body.iconLibrary-phosphor { .splide__arrow--next:after, .splide__arrow--prev:after { - color: $token-primitives-neutral-700; font-family: var(--osui-icon-font-family); position: absolute; - font-size: $token-font-size-600; - color: $token-primitives-neutral-1000 + font-size: variables.$token-font-size-600; + color: variables.$token-primitives-neutral-1000; } .splide__arrow--next:after { @@ -481,18 +483,18 @@ body.iconLibrary-phosphor { .flatpickr-months .flatpickr-prev-month:before, .flatpickr-months .flatpickr-next-month:before { - color: $token-semantics-primary-base; + color: variables.$token-semantics-primary-base; font-family: var(--osui-icon-font-family); } .icon-library-FontAwesome .flatpickr-months .flatpickr-prev-month:before, .icon-library-FontAwesome .flatpickr-months .flatpickr-next-month:before { - font-size: $token-font-size-500; + font-size: variables.$token-font-size-500; } .icon-library-Phosphor .flatpickr-months .flatpickr-prev-month:before, .icon-library-Phosphor .flatpickr-months .flatpickr-next-month:before { - font-weight: $token-font-weight-semi-bold; + font-weight: variables.$token-font-weight-semi-bold; } .flatpickr-prev-month:before { @@ -526,10 +528,10 @@ body.iconLibrary-phosphor { } .pswp__button.pswp__button--close:before { - color: $token-primitives-base-white; + color: variables.$token-primitives-base-white; content: var(--osui-icon-clear); font-family: var(--osui-icon-font-family); - font-size: $token-font-size-500; + font-size: variables.$token-font-size-500; position: absolute; right: 25%; top: 50%; @@ -538,9 +540,9 @@ body.iconLibrary-phosphor { .pswp__button--arrow--right:before, .pswp__button--arrow--left:before { - color: $token-primitives-base-white; + color: variables.$token-primitives-base-white; font-family: var(--osui-icon-font-family); - font-size: $token-font-size-500; + font-size: variables.$token-font-size-500; } .pswp__button--arrow--right:before { diff --git a/src/scss/01-foundations/_resets.scss b/src/scss/01-foundations/_resets.scss index 6f9ebb3630..89f17d7990 100644 --- a/src/scss/01-foundations/_resets.scss +++ b/src/scss/01-foundations/_resets.scss @@ -1,3 +1,6 @@ +@use '../00-abstract/index' as *; +@use "../tokens/variables"; + //// /// @group Resets /// Normalize - Reset default and native styles @@ -54,7 +57,7 @@ html { /* ============================================================================ */ /// body { - @include apply-typography($token-body-md-regular); + @include apply-typography(variables.$token-body-md-regular); background-color: var(--background-color-body, var(--color-background-body)); /// iOS devices loses the direction default value when toggle the RTL on the body element. Added the default property of direction to prevent the issue. direction: ltr; @@ -76,13 +79,13 @@ body { /// .has-accessible-features :focus { - box-shadow: 0 0 0 $token-border-size-075 var(--color-focus-outer); + box-shadow: 0 0 0 variables.$token-border-size-075 var(--color-focus-outer); } /// .os-high-contrast .has-accessible-features :focus { box-shadow: none; - outline: $token-border-size-075 solid var(--color-focus-outer); + outline: variables.$token-border-size-075 solid var(--color-focus-outer); } /* ============================================================================ */ @@ -112,8 +115,8 @@ label { /// [data-label].mandatory:after { - color: $token-semantics-danger-base; - margin-left: $token-scale-100; + color: variables.$token-semantics-danger-base; + margin-left: variables.$token-scale-100; } /* ============================================================================ */ diff --git a/src/scss/01-foundations/_root.scss b/src/scss/01-foundations/_root.scss index e0b748a776..f9626445da 100644 --- a/src/scss/01-foundations/_root.scss +++ b/src/scss/01-foundations/_root.scss @@ -1,3 +1,6 @@ +@use '../00-abstract/index' as *; +@use '../tokens/variables'; + //// /// @group Root /// Framework theme layer (Tier 3) + app-layout plumbing. @@ -10,64 +13,64 @@ :root { // ─── Theme layer · surfaces ────────────────────────────────────────── - --color-background-body: #{$token-bg-body}; - --color-background-surface: #{$token-bg-surface-default}; // cards, popups, menus, panels… - --color-background-header: #{$token-bg-surface-default}; - --color-background-sidemenu: #{$token-bg-surface-default}; - --color-background-footer: #{$token-bg-surface-default}; - --color-background-login: #{$token-bg-surface-default}; - --color-background-input: #{$token-bg-input-default}; - --color-background-input-disabled: #{$token-bg-input-disabled}; + --color-background-body: #{variables.$token-bg-body}; + --color-background-surface: #{variables.$token-bg-surface-default}; // cards, popups, menus, panels… + --color-background-header: #{variables.$token-bg-surface-default}; + --color-background-sidemenu: #{variables.$token-bg-surface-default}; + --color-background-footer: #{variables.$token-bg-surface-default}; + --color-background-login: #{variables.$token-bg-surface-default}; + --color-background-input: #{variables.$token-bg-input-default}; + --color-background-input-disabled: #{variables.$token-bg-input-disabled}; // ─── Theme layer · text ────────────────────────────────────────────── - --color-text: #{$token-text-default}; - --color-text-subtle: #{$token-text-subtle}; - --color-text-subtlest: #{$token-text-subtlest}; - --color-text-disabled: #{$token-text-disabled}; - --color-text-inverse: #{$token-text-inverse}; // text on a bold/colored background + --color-text: #{variables.$token-text-default}; + --color-text-subtle: #{variables.$token-text-subtle}; + --color-text-subtlest: #{variables.$token-text-subtlest}; + --color-text-disabled: #{variables.$token-text-disabled}; + --color-text-inverse: #{variables.$token-text-inverse}; // text on a bold/colored background // ─── Theme layer · borders (status borders follow their --color-* role) ── - --color-border: #{$token-border-default}; - --color-border-subtle: #{$token-border-subtle}; - --color-border-subtlest: #{$token-border-subtlest}; - --color-border-input: #{$token-border-input-default}; - --color-border-input-hover: #{$token-border-input-hover}; - --color-border-input-press: #{$token-border-input-press}; - --color-border-primary: #{$token-border-primary}; // border-specific primary tier (focus rings) + --color-border: #{variables.$token-border-default}; + --color-border-subtle: #{variables.$token-border-subtle}; + --color-border-subtlest: #{variables.$token-border-subtlest}; + --color-border-input: #{variables.$token-border-input-default}; + --color-border-input-hover: #{variables.$token-border-input-hover}; + --color-border-input-press: #{variables.$token-border-input-press}; + --color-border-primary: #{variables.$token-border-primary}; // border-specific primary tier (focus rings) // ─── Theme layer · brand / status / neutral (also read by TS GetColorValueFromColorType) ── - --color-primary: #{$token-semantics-primary-base}; - --color-primary-hover: #{$token-semantics-primary-800}; - --color-primary-selected: #{$token-semantics-primary-900}; // translucent-wash role for selected rows/items; apps override this - --color-primary-active: #{$token-semantics-primary-900}; // solid pressed/active-state role — do not alias to -selected above - --color-secondary: #{$token-bg-neutral-bold-default}; - --color-neutral: #{$token-primitives-neutral-500}; - --color-neutral-0: #{$token-primitives-neutral-100}; - --color-neutral-1: #{$token-primitives-neutral-200}; - --color-neutral-2: #{$token-primitives-neutral-300}; - --color-neutral-3: #{$token-primitives-neutral-400}; - --color-neutral-4: #{$token-primitives-neutral-500}; - --color-neutral-5: #{$token-primitives-neutral-600}; - --color-neutral-6: #{$token-primitives-neutral-700}; - --color-neutral-7: #{$token-primitives-neutral-800}; - --color-neutral-8: #{$token-primitives-neutral-900}; - --color-neutral-9: #{$token-primitives-neutral-1100}; - --color-neutral-10: #{$token-primitives-neutral-1200}; - --color-error: #{$token-semantics-danger-base}; - --color-border-danger: #{$token-border-danger-default}; // border-specific danger tier (form validation) - --color-text-danger: #{$token-text-danger}; // text-specific danger tier (form validation) - --color-warning: #{$token-semantics-warning-base}; - --color-success: #{$token-semantics-success-base}; - --color-info: #{$token-semantics-info-base}; + --color-primary: #{variables.$token-semantics-primary-base}; + --color-primary-hover: #{variables.$token-semantics-primary-800}; + --color-primary-selected: #{variables.$token-semantics-primary-900}; // translucent-wash role for selected rows/items; apps override this + --color-primary-active: #{variables.$token-semantics-primary-900}; // solid pressed/active-state role — do not alias to -selected above + --color-secondary: #{variables.$token-bg-neutral-bold-default}; + --color-neutral: #{variables.$token-primitives-neutral-500}; + --color-neutral-0: #{variables.$token-primitives-neutral-100}; + --color-neutral-1: #{variables.$token-primitives-neutral-200}; + --color-neutral-2: #{variables.$token-primitives-neutral-300}; + --color-neutral-3: #{variables.$token-primitives-neutral-400}; + --color-neutral-4: #{variables.$token-primitives-neutral-500}; + --color-neutral-5: #{variables.$token-primitives-neutral-600}; + --color-neutral-6: #{variables.$token-primitives-neutral-700}; + --color-neutral-7: #{variables.$token-primitives-neutral-800}; + --color-neutral-8: #{variables.$token-primitives-neutral-900}; + --color-neutral-9: #{variables.$token-primitives-neutral-1100}; + --color-neutral-10: #{variables.$token-primitives-neutral-1200}; + --color-error: #{variables.$token-semantics-danger-base}; + --color-border-danger: #{variables.$token-border-danger-default}; // border-specific danger tier (form validation) + --color-text-danger: #{variables.$token-text-danger}; // text-specific danger tier (form validation) + --color-warning: #{variables.$token-semantics-warning-base}; + --color-success: #{variables.$token-semantics-success-base}; + --color-info: #{variables.$token-semantics-info-base}; // ─── Theme layer · radius ──────────────────────────────────────────── // Each falls back to --border-radius-default (unset by default → own value); // set --border-radius-default once to re-radius the whole framework. // none/soft/rounded ↔ ShapeType (TS GetBorderRadiusValueFromShapeType); softer is CSS-only. - --border-radius-none: var(--border-radius-default, #{$token-border-radius-0}); // 0px - --border-radius-soft: var(--border-radius-default, #{$token-border-radius-200}); // 8px · controls + flat surfaces - --border-radius-softer: var(--border-radius-default, #{$token-border-radius-400}); // 16px · elevated surfaces - --border-radius-rounded: var(--border-radius-default, #{$token-border-radius-full}); // 999px · circular + --border-radius-none: var(--border-radius-default, #{variables.$token-border-radius-0}); // 0px + --border-radius-soft: var(--border-radius-default, #{variables.$token-border-radius-200}); // 8px · controls + flat surfaces + --border-radius-softer: var(--border-radius-default, #{variables.$token-border-radius-400}); // 16px · elevated surfaces + --border-radius-rounded: var(--border-radius-default, #{variables.$token-border-radius-full}); // 999px · circular // ─── App-layout plumbing (NOT part of the theme contract) ──────────── // Layout sizes @@ -87,11 +90,11 @@ --layer-system-scale: 100; --layer-above: var(--layer-system-scale); --layer-below: calc(-1 * var(--layer-system-scale)); - --layer-screen: #{$token-z-index-0}; - --layer-elevated: #{$token-z-index-100}; - --layer-navigation: #{$token-z-index-200}; - --layer-off-canvas: #{$token-z-index-300}; - --layer-instant-interaction: #{$token-z-index-400}; + --layer-screen: #{variables.$token-z-index-0}; + --layer-elevated: #{variables.$token-z-index-100}; + --layer-navigation: #{variables.$token-z-index-200}; + --layer-off-canvas: #{variables.$token-z-index-300}; + --layer-instant-interaction: #{variables.$token-z-index-400}; --layer-global-negative: -1; --layer-global-auto: auto; --layer-local-tier-1: 1; @@ -112,25 +115,25 @@ // upstream by rename (var name maps 1:1 to its proposed --token-*). --osui-border-focus-halo: color-mix( in srgb, - #{$token-semantics-primary-base} 22%, + #{variables.$token-semantics-primary-base} 22%, transparent ); // future: --token-border-focus-halo --color-focus-outer: var(--osui-border-focus-halo); // consumed by .has-accessible-features :focus --osui-elevation-overlay: 0 12px 24px -8px rgba(0, 0, 0, 0.12), 0 8px 16px -8px rgba(0, 0, 0, 0.08); // future: --token-elevation-overlay --osui-bg-surface-subtle: #fafbfc; // future: --token-bg-surface-subtle - // Motion durations with no matching $token-transition-time-* yet. Interim global vars + // Motion durations with no matching variables.$token-transition-time-* yet. Interim global vars // (the single home for these timings) until the token scale gains 130/180/400 steps. --osui-motion-duration-130: 130ms; // future: --token-transition-time-130 --osui-motion-duration-180: 180ms; // future: --token-transition-time-180 --osui-motion-duration-400: 400ms; // future: --token-transition-time-400 - --osui-bg-surface-hover: #{$token-primitives-neutral-100}; // future: --token-bg-surface-hover (#f3f3f3) + --osui-bg-surface-hover: #{variables.$token-primitives-neutral-100}; // future: --token-bg-surface-hover (#f3f3f3) --osui-bg-surface-active: color-mix( in srgb, - #{$token-semantics-primary-base} 8%, + #{variables.$token-semantics-primary-base} 8%, transparent ); // future: --token-bg-surface-active - --osui-border-subtle: #{$token-border-subtle}; // resolves to neutral-300 once outsystems-design-tokens ships the border.subtle fix (PR #99) + --osui-border-subtle: #{variables.$token-primitives-neutral-300}; // future: --token-border-subtle (intended neutral-300) --osui-opacity-disabled: 0.45; // future: --token-opacity-disabled --osui-elevation-25: 0 1px 2px rgba(0, 0, 0, 0.08); // future: --token-elevation-25 --osui-elevation-50: 0 1px 2px rgba(0, 0, 0, 0.2); // future: --token-elevation-50 diff --git a/src/scss/01-foundations/_theme-dark.scss b/src/scss/01-foundations/_theme-dark.scss index 5505121d43..a704a878c8 100644 --- a/src/scss/01-foundations/_theme-dark.scss +++ b/src/scss/01-foundations/_theme-dark.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + //// /// @group Theme-Dark /// Dark theme — opt-in, manual only. @@ -30,136 +32,136 @@ /* Re-evaluate native text color at this scope — `html { color: … }` resolves at the html element, so without this the computed (light) color inherits into descendants, including headings. */ - color: $token-text-default; + color: variables.$token-text-default; /* ────────────────────────────────────────────────────────────────────── */ /* Framework theme-layer roles — re-declared so components that read */ /* `--color-*` re-resolve against the dark `--token-*` set below. */ /* ────────────────────────────────────────────────────────────────────── */ - --color-background-body: #{$token-bg-body}; - --color-background-surface: #{$token-bg-surface-default}; - --color-background-header: #{$token-bg-surface-default}; - --color-background-sidemenu: #{$token-bg-surface-default}; - --color-background-footer: #{$token-bg-surface-default}; - --color-background-login: #{$token-bg-surface-default}; - --color-background-input: #{$token-bg-input-default}; - --color-background-input-disabled: #{$token-bg-input-disabled}; - - --color-text: #{$token-text-default}; - --color-text-subtle: #{$token-text-subtle}; - --color-text-subtlest: #{$token-text-subtlest}; - --color-text-disabled: #{$token-text-disabled}; - --color-text-inverse: #{$token-text-inverse}; - - --color-border: #{$token-border-default}; - --color-border-subtle: #{$token-border-subtle}; - --color-border-subtlest: #{$token-border-subtlest}; - --color-border-input: #{$token-border-input-default}; - --color-border-input-press: #{$token-border-input-press}; - - --color-primary: #{$token-semantics-primary-base}; - --color-error: #{$token-semantics-danger-base}; - --color-warning: #{$token-semantics-warning-base}; - --color-success: #{$token-semantics-success-base}; - --color-info: #{$token-semantics-info-base}; + --color-background-body: #{variables.$token-bg-body}; + --color-background-surface: #{variables.$token-bg-surface-default}; + --color-background-header: #{variables.$token-bg-surface-default}; + --color-background-sidemenu: #{variables.$token-bg-surface-default}; + --color-background-footer: #{variables.$token-bg-surface-default}; + --color-background-login: #{variables.$token-bg-surface-default}; + --color-background-input: #{variables.$token-bg-input-default}; + --color-background-input-disabled: #{variables.$token-bg-input-disabled}; + + --color-text: #{variables.$token-text-default}; + --color-text-subtle: #{variables.$token-text-subtle}; + --color-text-subtlest: #{variables.$token-text-subtlest}; + --color-text-disabled: #{variables.$token-text-disabled}; + --color-text-inverse: #{variables.$token-text-inverse}; + + --color-border: #{variables.$token-border-default}; + --color-border-subtle: #{variables.$token-border-subtle}; + --color-border-subtlest: #{variables.$token-border-subtlest}; + --color-border-input: #{variables.$token-border-input-default}; + --color-border-input-press: #{variables.$token-border-input-press}; + + --color-primary: #{variables.$token-semantics-primary-base}; + --color-error: #{variables.$token-semantics-danger-base}; + --color-warning: #{variables.$token-semantics-warning-base}; + --color-success: #{variables.$token-semantics-success-base}; + --color-info: #{variables.$token-semantics-info-base}; /* ────────────────────────────────────────────────────────────────────── */ /* Surface hierarchy — warm near-blacks, inspired by Vercel / Linear */ /* ────────────────────────────────────────────────────────────────────── */ - --token-bg-body: #{$token-primitives-base-black}; - --token-bg-surface-default: #{$token-primitives-neutral-1200}; - --token-bg-surface-inverse: #{$token-primitives-neutral-100}; + --token-bg-body: #{variables.$token-primitives-base-black}; + --token-bg-surface-default: #{variables.$token-primitives-neutral-1200}; + --token-bg-surface-inverse: #{variables.$token-primitives-neutral-100}; /* Inputs */ - --token-bg-input-default: #{$token-primitives-neutral-1100}; - --token-bg-input-read-only: #{$token-primitives-neutral-1000}; - --token-bg-input-press: #{$token-primitives-neutral-1000}; - --token-bg-input-disabled: #{$token-primitives-neutral-1200}; - --token-bg-input-bold-default: #{$token-primitives-neutral-1000}; - --token-bg-input-bold-press: #{$token-primitives-neutral-900}; - --token-bg-input-bold-read-only: #{$token-primitives-neutral-1000}; - --token-bg-input-bold-disabled: #{$token-primitives-neutral-1100}; + --token-bg-input-default: #{variables.$token-primitives-neutral-1100}; + --token-bg-input-read-only: #{variables.$token-primitives-neutral-1000}; + --token-bg-input-press: #{variables.$token-primitives-neutral-1000}; + --token-bg-input-disabled: #{variables.$token-primitives-neutral-1200}; + --token-bg-input-bold-default: #{variables.$token-primitives-neutral-1000}; + --token-bg-input-bold-press: #{variables.$token-primitives-neutral-900}; + --token-bg-input-bold-read-only: #{variables.$token-primitives-neutral-1000}; + --token-bg-input-bold-disabled: #{variables.$token-primitives-neutral-1100}; /* Neutral tinted rows, table stripes, hovers */ - --token-bg-neutral-subtle-default: #{$token-primitives-neutral-1100}; - --token-bg-neutral-subtle-press: #{$token-primitives-neutral-1000}; - --token-bg-neutral-subtlest-default: #{$token-primitives-neutral-1200}; - --token-bg-neutral-subtlest-press: #{$token-primitives-neutral-1100}; - --token-bg-neutral-base-default: #{$token-primitives-neutral-700}; - --token-bg-neutral-base-press: #{$token-primitives-neutral-500}; - --token-bg-neutral-bold-default: #{$token-primitives-neutral-200}; - --token-bg-neutral-bold-press: #{$token-primitives-neutral-100}; - --token-bg-neutral-boldest-default: #{$token-primitives-neutral-100}; - --token-bg-neutral-boldest-press: #{$token-primitives-base-white}; + --token-bg-neutral-subtle-default: #{variables.$token-primitives-neutral-1100}; + --token-bg-neutral-subtle-press: #{variables.$token-primitives-neutral-1000}; + --token-bg-neutral-subtlest-default: #{variables.$token-primitives-neutral-1200}; + --token-bg-neutral-subtlest-press: #{variables.$token-primitives-neutral-1100}; + --token-bg-neutral-base-default: #{variables.$token-primitives-neutral-700}; + --token-bg-neutral-base-press: #{variables.$token-primitives-neutral-500}; + --token-bg-neutral-bold-default: #{variables.$token-primitives-neutral-200}; + --token-bg-neutral-bold-press: #{variables.$token-primitives-neutral-100}; + --token-bg-neutral-boldest-default: #{variables.$token-primitives-neutral-100}; + --token-bg-neutral-boldest-press: #{variables.$token-primitives-base-white}; /* ────────────────────────────────────────────────────────────────────── */ /* Text */ /* ────────────────────────────────────────────────────────────────────── */ - --token-text-default: #{$token-primitives-neutral-100}; - --token-text-subtle: #{$token-primitives-neutral-300}; - --token-text-subtlest: #{$token-primitives-neutral-500}; - --token-text-disabled: #{$token-primitives-neutral-700}; - --token-text-inverse: #{$token-primitives-base-black}; + --token-text-default: #{variables.$token-primitives-neutral-100}; + --token-text-subtle: #{variables.$token-primitives-neutral-300}; + --token-text-subtlest: #{variables.$token-primitives-neutral-500}; + --token-text-disabled: #{variables.$token-primitives-neutral-700}; + --token-text-inverse: #{variables.$token-primitives-base-black}; /* Primary / semantic text — lighter palette end for WCAG AA on dark. */ - --token-text-primary: #{$token-primitives-blue-400}; - --token-text-select: #{$token-primitives-blue-400}; - --token-text-info: #{$token-primitives-blue-400}; - --token-text-success: #{$token-primitives-green-400}; - --token-text-danger: #{$token-primitives-red-400}; - --token-text-warning: #{$token-primitives-yellow-400}; - --token-text-link-default: #{$token-primitives-blue-400}; - --token-text-link-press: #{$token-primitives-blue-300}; - --token-text-link-visited: #{$token-primitives-blue-500}; + --token-text-primary: #{variables.$token-primitives-blue-400}; + --token-text-select: #{variables.$token-primitives-blue-400}; + --token-text-info: #{variables.$token-primitives-blue-400}; + --token-text-success: #{variables.$token-primitives-green-400}; + --token-text-danger: #{variables.$token-primitives-red-400}; + --token-text-warning: #{variables.$token-primitives-yellow-400}; + --token-text-link-default: #{variables.$token-primitives-blue-400}; + --token-text-link-press: #{variables.$token-primitives-blue-300}; + --token-text-link-visited: #{variables.$token-primitives-blue-500}; /* Extended palette text */ - --token-text-extended-pumpkin: #{$token-primitives-pumpkin-400}; - --token-text-extended-orange: #{$token-primitives-orange-400}; - --token-text-extended-lime: #{$token-primitives-lime-400}; - --token-text-extended-teal: #{$token-primitives-teal-400}; - --token-text-extended-aqua: #{$token-primitives-aqua-400}; - --token-text-extended-indigo: #{$token-primitives-indigo-400}; - --token-text-extended-violet: #{$token-primitives-violet-400}; - --token-text-extended-purple: #{$token-primitives-purple-400}; - --token-text-extended-magenta: #{$token-primitives-magenta-400}; - --token-text-extended-pink: #{$token-primitives-pink-400}; + --token-text-extended-pumpkin: #{variables.$token-primitives-pumpkin-400}; + --token-text-extended-orange: #{variables.$token-primitives-orange-400}; + --token-text-extended-lime: #{variables.$token-primitives-lime-400}; + --token-text-extended-teal: #{variables.$token-primitives-teal-400}; + --token-text-extended-aqua: #{variables.$token-primitives-aqua-400}; + --token-text-extended-indigo: #{variables.$token-primitives-indigo-400}; + --token-text-extended-violet: #{variables.$token-primitives-violet-400}; + --token-text-extended-purple: #{variables.$token-primitives-purple-400}; + --token-text-extended-magenta: #{variables.$token-primitives-magenta-400}; + --token-text-extended-pink: #{variables.$token-primitives-pink-400}; /* ────────────────────────────────────────────────────────────────────── */ /* Icons mirror text */ /* ────────────────────────────────────────────────────────────────────── */ - --token-icon-default: #{$token-primitives-neutral-100}; - --token-icon-subtle: #{$token-primitives-neutral-300}; - --token-icon-subtlest: #{$token-primitives-neutral-500}; - --token-icon-disabled: #{$token-primitives-neutral-700}; - --token-icon-inverse: #{$token-primitives-base-black}; - --token-icon-primary: #{$token-primitives-blue-400}; - --token-icon-select: #{$token-primitives-blue-400}; - --token-icon-info: #{$token-primitives-blue-400}; - --token-icon-success: #{$token-primitives-green-400}; - --token-icon-danger: #{$token-primitives-red-400}; - --token-icon-warning: #{$token-primitives-yellow-400}; + --token-icon-default: #{variables.$token-primitives-neutral-100}; + --token-icon-subtle: #{variables.$token-primitives-neutral-300}; + --token-icon-subtlest: #{variables.$token-primitives-neutral-500}; + --token-icon-disabled: #{variables.$token-primitives-neutral-700}; + --token-icon-inverse: #{variables.$token-primitives-base-black}; + --token-icon-primary: #{variables.$token-primitives-blue-400}; + --token-icon-select: #{variables.$token-primitives-blue-400}; + --token-icon-info: #{variables.$token-primitives-blue-400}; + --token-icon-success: #{variables.$token-primitives-green-400}; + --token-icon-danger: #{variables.$token-primitives-red-400}; + --token-icon-warning: #{variables.$token-primitives-yellow-400}; /* ────────────────────────────────────────────────────────────────────── */ /* Borders — barely visible hairlines */ /* ────────────────────────────────────────────────────────────────────── */ - --token-border-default: #{$token-primitives-neutral-1000}; - --token-border-subtle: #{$token-primitives-neutral-1100}; - --token-border-subtlest: #{$token-primitives-neutral-1200}; - --token-border-boldest: #{$token-primitives-neutral-100}; - --token-border-disabled: #{$token-primitives-neutral-1000}; - --token-border-input-default: #{$token-primitives-neutral-900}; - --token-border-input-press: #{$token-primitives-neutral-700}; - --token-border-input-read-only: #{$token-primitives-neutral-900}; - --token-border-focus-default: #{$token-primitives-blue-500}; - --token-border-focus-error: #{$token-primitives-red-500}; + --token-border-default: #{variables.$token-primitives-neutral-1000}; + --token-border-subtle: #{variables.$token-primitives-neutral-1100}; + --token-border-subtlest: #{variables.$token-primitives-neutral-1200}; + --token-border-boldest: #{variables.$token-primitives-neutral-100}; + --token-border-disabled: #{variables.$token-primitives-neutral-1000}; + --token-border-input-default: #{variables.$token-primitives-neutral-900}; + --token-border-input-press: #{variables.$token-primitives-neutral-700}; + --token-border-input-read-only: #{variables.$token-primitives-neutral-900}; + --token-border-focus-default: #{variables.$token-primitives-blue-500}; + --token-border-focus-error: #{variables.$token-primitives-red-500}; /* ────────────────────────────────────────────────────────────────────── */ /* Primary brand — nudge up one shade so it stays vibrant on black */ /* ────────────────────────────────────────────────────────────────────── */ - --token-semantics-primary-base: #{$token-primitives-blue-600}; - --token-bg-primary-base-default: #{$token-primitives-blue-600}; - --token-bg-primary-base-press: #{$token-primitives-blue-500}; - --token-border-primary: #{$token-primitives-blue-600}; + --token-semantics-primary-base: #{variables.$token-primitives-blue-600}; + --token-bg-primary-base-default: #{variables.$token-primitives-blue-600}; + --token-bg-primary-base-press: #{variables.$token-primitives-blue-500}; + --token-border-primary: #{variables.$token-primitives-blue-600}; /* ────────────────────────────────────────────────────────────────────── */ /* Semantic subtle backgrounds — glassy rgba tints over the dark surface */ @@ -178,14 +180,14 @@ --token-bg-select-press: rgba(105, 134, 242, 0.28); /* Semantic bold backgrounds — one step brighter for contrast */ - --token-bg-danger-base-default: #{$token-primitives-red-600}; - --token-bg-danger-base-press: #{$token-primitives-red-500}; - --token-bg-success-base-default: #{$token-primitives-green-600}; - --token-bg-success-base-press: #{$token-primitives-green-500}; - --token-bg-info-base-default: #{$token-primitives-blue-600}; - --token-bg-info-base-press: #{$token-primitives-blue-500}; - --token-bg-warning-base-default: #{$token-primitives-yellow-500}; - --token-bg-warning-base-press: #{$token-primitives-yellow-400}; + --token-bg-danger-base-default: #{variables.$token-primitives-red-600}; + --token-bg-danger-base-press: #{variables.$token-primitives-red-500}; + --token-bg-success-base-default: #{variables.$token-primitives-green-600}; + --token-bg-success-base-press: #{variables.$token-primitives-green-500}; + --token-bg-info-base-default: #{variables.$token-primitives-blue-600}; + --token-bg-info-base-press: #{variables.$token-primitives-blue-500}; + --token-bg-warning-base-default: #{variables.$token-primitives-yellow-500}; + --token-bg-warning-base-press: #{variables.$token-primitives-yellow-400}; /* ────────────────────────────────────────────────────────────────────── */ /* Elevation — much darker shadows to register against the body */ @@ -215,57 +217,57 @@ /* Card — on dark surfaces a visible border reads better than a shadow. */ .card { - --osui-card-border-color: #{$token-primitives-neutral-1100}; + --osui-card-border-color: #{variables.$token-primitives-neutral-1100}; --osui-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 2px 10px rgba(0, 0, 0, 0.25); } /* Alert — accent colors shift to the lighter palette shade. */ .alert { &-info { - --osui-alert-accent-color: #{$token-primitives-blue-500}; + --osui-alert-accent-color: #{variables.$token-primitives-blue-500}; } &-success { - --osui-alert-accent-color: #{$token-primitives-green-500}; + --osui-alert-accent-color: #{variables.$token-primitives-green-500}; } &-error { - --osui-alert-accent-color: #{$token-primitives-red-500}; + --osui-alert-accent-color: #{variables.$token-primitives-red-500}; } &-warning { - --osui-alert-accent-color: #{$token-primitives-yellow-500}; + --osui-alert-accent-color: #{variables.$token-primitives-yellow-500}; } } /* Button — keep bold variant colors vibrant on dark. */ .btn { - --osui-btn-primary-background: #{$token-primitives-blue-600}; - --osui-btn-primary-border-color: #{$token-primitives-blue-600}; - --osui-btn-success-background: #{$token-primitives-green-600}; - --osui-btn-success-border-color: #{$token-primitives-green-600}; - --osui-btn-error-background: #{$token-primitives-red-600}; - --osui-btn-error-border-color: #{$token-primitives-red-600}; + --osui-btn-primary-background: #{variables.$token-primitives-blue-600}; + --osui-btn-primary-border-color: #{variables.$token-primitives-blue-600}; + --osui-btn-success-background: #{variables.$token-primitives-green-600}; + --osui-btn-success-border-color: #{variables.$token-primitives-green-600}; + --osui-btn-error-background: #{variables.$token-primitives-red-600}; + --osui-btn-error-border-color: #{variables.$token-primitives-red-600}; } /* Table — rgba tints read better than solid stripes/hovers on dark. */ .table { - --osui-table-border-color: #{$token-primitives-neutral-1100}; - --osui-table-header-background: #{$token-primitives-neutral-1100}; - --osui-table-header-color: #{$token-primitives-neutral-300}; - --osui-table-cell-background: #{$token-primitives-neutral-1200}; + --osui-table-border-color: #{variables.$token-primitives-neutral-1100}; + --osui-table-header-background: #{variables.$token-primitives-neutral-1100}; + --osui-table-header-color: #{variables.$token-primitives-neutral-300}; + --osui-table-cell-background: #{variables.$token-primitives-neutral-1200}; --osui-table-row-hover-background: rgba(255, 255, 255, 0.03); --osui-table-row-stripe-background: rgba(255, 255, 255, 0.02); - --osui-table-sorted-color: #{$token-primitives-blue-400}; + --osui-table-sorted-color: #{variables.$token-primitives-blue-400}; } /* Inputs */ .form-control { - --osui-input-focus-border-color: #{$token-primitives-blue-500}; + --osui-input-focus-border-color: #{variables.$token-primitives-blue-500}; } /* Tag / Badge — keep the darker text on subtle-neutral backgrounds. */ .badge, .tag { - --osui-badge-on-light-color: #{$token-primitives-neutral-1200}; - --osui-tag-on-light-color: #{$token-primitives-neutral-1200}; + --osui-badge-on-light-color: #{variables.$token-primitives-neutral-1200}; + --osui-tag-on-light-color: #{variables.$token-primitives-neutral-1200}; } /* ══════════════════════════════════════════════════════════════════════ */ @@ -277,38 +279,38 @@ /* Header — thin hairline to separate from the body. */ .header { - border-bottom: 1px solid #{$token-primitives-neutral-1100}; + border-bottom: 1px solid #{variables.$token-primitives-neutral-1100}; } /* Menu overlay / sidebar surface */ .app-menu-content, .aside-navigation { - background-color: #{$token-primitives-neutral-1200}; + background-color: #{variables.$token-primitives-neutral-1200}; } /* Menu links */ .app-menu-links a { - color: #{$token-primitives-neutral-300}; + color: #{variables.$token-primitives-neutral-300}; &:hover, &.active { - color: #{$token-primitives-blue-400}; + color: #{variables.$token-primitives-blue-400}; } } /* Validation text */ span.validation-message { - color: #{$token-primitives-red-400}; + color: #{variables.$token-primitives-red-400}; } /* Native input placeholder color */ ::placeholder { - color: #{$token-primitives-neutral-600}; + color: #{variables.$token-primitives-neutral-600}; } /* Labels */ label { - color: #{$token-primitives-neutral-300}; + color: #{variables.$token-primitives-neutral-300}; } } diff --git a/src/scss/02-layout/_content.scss b/src/scss/02-layout/_content.scss index cfb3836e08..a3838adc71 100644 --- a/src/scss/02-layout/_content.scss +++ b/src/scss/02-layout/_content.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Page Layout - Content */ //// /// @group Layout-Content @@ -11,7 +13,7 @@ position: relative; &-breadcrumbs { - margin-bottom: $token-scale-400; + margin-bottom: variables.$token-scale-400; } &-top { @@ -19,19 +21,19 @@ &-title { flex: 1; - margin-bottom: $token-scale-800; + margin-bottom: variables.$token-scale-800; // Retro Compatilibity .Title_Links { - font-size: $token-font-size-350; - font-weight: $token-font-weight-regular; + font-size: variables.$token-font-size-350; + font-weight: variables.$token-font-weight-regular; } } &-actions { flex: 1; justify-content: flex-end; - margin-bottom: $token-scale-800; + margin-bottom: variables.$token-scale-800; text-align: right; } diff --git a/src/scss/02-layout/_header-layout-native.scss b/src/scss/02-layout/_header-layout-native.scss index 1e9ff2ad1e..4507b09e6d 100644 --- a/src/scss/02-layout/_header-layout-native.scss +++ b/src/scss/02-layout/_header-layout-native.scss @@ -1,3 +1,6 @@ +@use '../00-abstract/index' as *; +@use "../tokens/variables"; + /* Page Layout - Layout Native - Header */ //// /// @group Layout-Native-Header @@ -15,12 +18,12 @@ top: 0; &-top { - padding: 0 $token-scale-800; + padding: 0 variables.$token-scale-800; } &-title { - font-size: $token-font-size-500; - font-weight: $token-font-weight-regular; + font-size: variables.$token-font-size-500; + font-weight: variables.$token-font-weight-regular; // Service Studio Preview & { @@ -31,14 +34,14 @@ &-left { flex: 1; - margin-right: $token-scale-400; + margin-right: variables.$token-scale-400; } &-right { display: flex; flex: 1; justify-content: flex-end; - margin-left: $token-scale-400; + margin-left: variables.$token-scale-400; margin-right: auto; // ServiceStudio Preview @@ -90,7 +93,7 @@ .phone { .layout-native { .header-top { - padding: 0 $token-scale-600; + padding: 0 variables.$token-scale-600; } } } @@ -99,7 +102,7 @@ .tablet { .layout-native { .header-title { - font-size: calc($token-font-size-500 - 1px); + font-size: calc(variables.$token-font-size-500 - 1px); } } } @@ -108,7 +111,7 @@ .phone { .layout-native { .header-title { - font-size: calc($token-font-size-500 - 2px); + font-size: calc(variables.$token-font-size-500 - 2px); } } } @@ -141,13 +144,13 @@ .is-rtl { .layout-native { .header-left { - margin-left: $token-scale-400; + margin-left: variables.$token-scale-400; margin-right: 0; } .header-right { margin-left: auto; - margin-right: $token-scale-400; + margin-right: variables.$token-scale-400; } } } diff --git a/src/scss/02-layout/_header.scss b/src/scss/02-layout/_header.scss index a3acec5fd7..bb370fda9a 100644 --- a/src/scss/02-layout/_header.scss +++ b/src/scss/02-layout/_header.scss @@ -1,3 +1,6 @@ +@use '../00-abstract/index' as *; +@use "../tokens/variables"; + /* Page Layout - Header */ //// /// @group Layout-Header @@ -6,7 +9,7 @@ /// .header { background-color: var(--background-color-header, var(--color-background-header)); - box-shadow: $token-elevation-1; + box-shadow: variables.$token-elevation-1; z-index: var(--layer-navigation); // Service Studio Preview @@ -19,7 +22,7 @@ } &-logo { - padding-right: $token-scale-400; + padding-right: variables.$token-scale-400; .application-name { word-break: break-word; @@ -34,7 +37,7 @@ height: 100%; & > [data-block*='ApplicationTitle'] .application-name { - margin-right: $token-scale-600; + margin-right: variables.$token-scale-600; } } @@ -119,24 +122,24 @@ .is-rtl { .header { &-logo { - padding-left: $token-scale-400; + padding-left: variables.$token-scale-400; padding-right: 0; } .header-content > [data-block*='ApplicationTitle'] .application-name { margin-right: 0; - margin-left: $token-scale-600; + margin-left: variables.$token-scale-600; } } .app-logo, .layout-side .app-logo { - margin-left: $token-scale-200; + margin-left: variables.$token-scale-200; margin-right: 0; } .menu-icon { - margin-left: $token-scale-600; + margin-left: variables.$token-scale-600; margin-right: 0; } } diff --git a/src/scss/02-layout/_layout.scss b/src/scss/02-layout/_layout.scss index d37b0abfda..b9bb99fb00 100644 --- a/src/scss/02-layout/_layout.scss +++ b/src/scss/02-layout/_layout.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + //// /// @group Layout /// Layout @@ -177,7 +179,7 @@ body, /// .phone { .layout:not(.layout-native) [class*='ThemeGrid_Width']:not(.no-responsive) { - margin: $token-scale-0 $token-scale-0 $token-scale-400 $token-scale-0; + margin: variables.$token-scale-0 variables.$token-scale-0 variables.$token-scale-400 variables.$token-scale-0; width: 100%; } } @@ -242,11 +244,11 @@ body, // Nested layout SS preview /// .layout .main-content .layout { - -servicestudio-min-width: calc(100vw - ($token-scale-1000 * 2)); + -servicestudio-min-width: calc(100vw - (variables.$token-scale-1000 * 2)); } .phone .layout .main-content .layout { - -servicestudio-min-width: calc(100vw - ($token-scale-400 * 2)); + -servicestudio-min-width: calc(100vw - (variables.$token-scale-400 * 2)); &.layout-native { -servicestudio-min-width: 100vw; diff --git a/src/scss/02-layout/_login.scss b/src/scss/02-layout/_login.scss index 601c815fe7..343a5bb2d6 100644 --- a/src/scss/02-layout/_login.scss +++ b/src/scss/02-layout/_login.scss @@ -1,3 +1,6 @@ +@use '../00-abstract/index' as *; +@use "../tokens/variables"; + /* Page Layout - Login */ //// /// @group Layout-Login @@ -7,7 +10,7 @@ .login { &-screen { align-items: center; - background-color: $token-semantics-primary-base; + background-color: variables.$token-semantics-primary-base; display: flex; height: 100%; justify-content: center; @@ -21,11 +24,11 @@ } &-form { - background-color: $token-bg-surface-default; - border-radius: $token-border-radius-100; - box-shadow: $token-elevation-3; + background-color: variables.$token-bg-surface-default; + border-radius: variables.$token-border-radius-100; + box-shadow: variables.$token-elevation-3; min-width: 435px; - padding: $token-scale-1200; + padding: variables.$token-scale-1200; z-index: var(--layer-screen); } } @@ -69,9 +72,9 @@ /// .phone { .login-form { - margin: $token-scale-0 $token-scale-400; + margin: variables.$token-scale-0 variables.$token-scale-400; min-width: auto; - padding: $token-scale-800; + padding: variables.$token-scale-800; width: 100%; } @@ -88,7 +91,7 @@ } &.blank .login-button .btn { - padding-bottom: $token-scale-0; + padding-bottom: variables.$token-scale-0; } } } diff --git a/src/scss/02-layout/_menu-app-login-info.scss b/src/scss/02-layout/_menu-app-login-info.scss index b996297809..4e0028dae0 100644 --- a/src/scss/02-layout/_menu-app-login-info.scss +++ b/src/scss/02-layout/_menu-app-login-info.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Page Layout - Menu - App Login Info */ //// /// @group Layout-Header-App_Login_Info @@ -6,7 +8,7 @@ /// .layout-side { .app-login-info { - padding: $token-scale-400 $token-scale-600; + padding: variables.$token-scale-400 variables.$token-scale-600; } .user-info { @@ -18,7 +20,7 @@ .tablet, .phone { .app-login-info { - padding: $token-scale-400 $token-scale-600; + padding: variables.$token-scale-400 variables.$token-scale-600; } .user-info { diff --git a/src/scss/02-layout/_menu-app-menu-links.scss b/src/scss/02-layout/_menu-app-menu-links.scss index b86c7ae222..f43d88a30d 100644 --- a/src/scss/02-layout/_menu-app-menu-links.scss +++ b/src/scss/02-layout/_menu-app-menu-links.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Page Layout - Menu - App Menu Link */ //// /// @group Layout-Menu-App_Menu_Link @@ -12,7 +14,7 @@ & { -servicestudio-align-items: center; -servicestudio-display: flex; - -servicestudio-column-gap: $token-scale-600; + -servicestudio-column-gap: variables.$token-scale-600; } // Service Studio Preview @@ -21,9 +23,9 @@ // Service Studio Preview &:after { - -servicestudio-color: $token-primitives-neutral-700; + -servicestudio-color: variables.$token-primitives-neutral-700; -servicestudio-content: 'Drag screens to this container to create menu entries'; - -servicestudio-font-size: $token-font-size-300; + -servicestudio-font-size: variables.$token-font-size-300; -servicestudio-left: 50%; -servicestudio-position: absolute; -servicestudio-text-align: center; @@ -42,7 +44,7 @@ &:hover, &.active { - color: $token-semantics-primary-base; + color: variables.$token-semantics-primary-base; text-decoration: none; } } @@ -55,7 +57,7 @@ body { // Service Studio Preview & { -servicestudio-align-items: flex-start; - -servicestudio-padding: $token-scale-0; + -servicestudio-padding: variables.$token-scale-0; -servicestudio-width: 100% !important; } } @@ -77,12 +79,12 @@ body { .app-menu-links { a { align-items: center; - border-bottom: $token-border-size-050 solid transparent; - border-top: $token-border-size-050 solid transparent; + border-bottom: variables.$token-border-size-050 solid transparent; + border-top: variables.$token-border-size-050 solid transparent; display: inline-flex; &.active { - border-bottom: $token-border-size-050 solid transparent; + border-bottom: variables.$token-border-size-050 solid transparent; } } } @@ -95,10 +97,10 @@ body { a { border-bottom: 0; border-left: 0; - border-radius: $token-border-radius-200; + border-radius: variables.$token-border-radius-200; border-top: 0; margin-left: 0; - padding: $token-scale-200 $token-scale-400; + padding: variables.$token-scale-200 variables.$token-scale-400; } } } @@ -120,13 +122,13 @@ body { -webkit-overflow-scrolling: touch; overflow-y: auto; - padding: $token-scale-200; + padding: variables.$token-scale-200; width: 100%; > a.active { - background-color: $token-bg-primary-subtle-default; + background-color: variables.$token-bg-primary-subtle-default; border-left: 0; - border-radius: $token-border-radius-200; + border-radius: variables.$token-border-radius-200; } } @@ -156,14 +158,14 @@ body { flex-direction: column; -webkit-overflow-scrolling: touch; overflow-y: auto; - padding: $token-scale-200; + padding: variables.$token-scale-200; width: 100%; a { // Service Studio preview & { - -servicestudio-margin-left: $token-scale-0; - -servicestudio-padding: $token-scale-200 $token-scale-600; + -servicestudio-margin-left: variables.$token-scale-0; + -servicestudio-padding: variables.$token-scale-200 variables.$token-scale-600; -servicestudio-width: 100%; } } @@ -177,11 +179,11 @@ body { // Accessibility ----------------------------------------------------------------- .has-accessible-features { .header a.active:focus { - color: $token-semantics-primary-base; + color: variables.$token-semantics-primary-base; } .app-menu-links a:focus { background-color: transparent; - box-shadow: 0 0 0 $token-border-size-075 var(--color-focus-outer); + box-shadow: 0 0 0 variables.$token-border-size-075 var(--color-focus-outer); } } diff --git a/src/scss/02-layout/_menu-header-logo.scss b/src/scss/02-layout/_menu-header-logo.scss index 9dfc67865a..9cde6a1abb 100644 --- a/src/scss/02-layout/_menu-header-logo.scss +++ b/src/scss/02-layout/_menu-header-logo.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Page Layout - Menu - Header Logo */ //// /// @group Layout-Menu-Header_Logo @@ -7,7 +9,7 @@ .layout-side { .header-logo { height: var(--size-header); - padding: $token-scale-0 $token-scale-600; + padding: variables.$token-scale-0 variables.$token-scale-600; } } @@ -16,6 +18,6 @@ .phone { .header-logo { height: var(--size-header); - padding: $token-scale-0 $token-scale-600; + padding: variables.$token-scale-0 variables.$token-scale-600; } } diff --git a/src/scss/02-layout/_menu-layout-native.scss b/src/scss/02-layout/_menu-layout-native.scss index 0ca4943077..139668b5f4 100644 --- a/src/scss/02-layout/_menu-layout-native.scss +++ b/src/scss/02-layout/_menu-layout-native.scss @@ -1,3 +1,6 @@ +@use '../00-abstract/index' as *; +@use "../tokens/variables"; + /* Page Layout - Layout Native - Menu */ //// /// @group Layout-Native-Menu @@ -21,7 +24,7 @@ position: absolute; right: -24px; top: calc(var(--size-header) + var(--size-header-content)); - width: $token-scale-600; + width: variables.$token-scale-600; } } } @@ -52,7 +55,7 @@ &-visible, &-expandable { .app-menu-content { - box-shadow: $token-elevation-2; + box-shadow: variables.$token-elevation-2; z-index: var(--osui-menu-layer); } } @@ -92,7 +95,7 @@ &-visible, &-expandable { .app-menu-content { - box-shadow: $token-elevation-2; + box-shadow: variables.$token-elevation-2; left: 0; z-index: var(--osui-menu-layer); } diff --git a/src/scss/02-layout/_menu-layout-side.scss b/src/scss/02-layout/_menu-layout-side.scss index 6f0786b66a..348a93791a 100644 --- a/src/scss/02-layout/_menu-layout-side.scss +++ b/src/scss/02-layout/_menu-layout-side.scss @@ -1,3 +1,6 @@ +@use '../00-abstract/index' as *; +@use "../tokens/variables"; + /* Page Layout Side - Layout Side - Menu */ //// /// @group Layout-Side-Menu @@ -10,7 +13,7 @@ } .app-menu-content { - background-color: $token-bg-surface-default; + background-color: variables.$token-bg-surface-default; bottom: 0; flex-direction: column; height: auto; @@ -25,7 +28,7 @@ /// .aside-overlay { .app-menu-content { - background-color: $token-bg-surface-default; + background-color: variables.$token-bg-surface-default; flex-direction: column; height: 100%; left: calc(-1 * var(--size-side-menu)); diff --git a/src/scss/02-layout/_menu.scss b/src/scss/02-layout/_menu.scss index 15ae7bf2c2..6279cc95b1 100644 --- a/src/scss/02-layout/_menu.scss +++ b/src/scss/02-layout/_menu.scss @@ -1,3 +1,6 @@ +@use '../00-abstract/index' as *; +@use "../tokens/variables"; + /* Page Layout - Menu */ //// /// @group Layout-Menu @@ -16,7 +19,7 @@ /// .app-menu-overlay { - background-color: $token-backdrop; + background-color: variables.$token-backdrop; height: 100vh; left: 0; opacity: 0; @@ -80,7 +83,7 @@ .aside-navigation { // Service Studio Preview & { - -servicestudio-background-color: $token-bg-surface-default; + -servicestudio-background-color: variables.$token-bg-surface-default; -servicestudio-height: 100%; -servicestudio-position: fixed; -servicestudio-width: var(--size-side-menu); @@ -141,11 +144,11 @@ .tablet, .phone { .app-login-info { - padding: $token-scale-200 $token-scale-600; + padding: variables.$token-scale-200 variables.$token-scale-600; } .app-menu-content { - background-color: $token-bg-surface-default; + background-color: variables.$token-bg-surface-default; flex-direction: column; height: 100%; left: calc(-1 * var(--size-side-menu)); diff --git a/src/scss/02-layout/_section.scss b/src/scss/02-layout/_section.scss index 34d079d373..8c33db0690 100644 --- a/src/scss/02-layout/_section.scss +++ b/src/scss/02-layout/_section.scss @@ -1,3 +1,6 @@ +@use '../00-abstract/index' as *; +@use "../tokens/variables"; + /* Page Layout - Section */ //// /// @group Layout-Section @@ -8,7 +11,7 @@ position: relative; .ThemeGrid_Container { - padding: $token-scale-0 $token-scale-1000; + padding: variables.$token-scale-0 variables.$token-scale-1000; } } diff --git a/src/scss/02-layout/_themegrid-container.scss b/src/scss/02-layout/_themegrid-container.scss index 48282549e2..9bdb3efdf8 100644 --- a/src/scss/02-layout/_themegrid-container.scss +++ b/src/scss/02-layout/_themegrid-container.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Page Layout - ThemeGrid_Container */ //// /// @group Layout-ThemeGrid_Container @@ -5,25 +7,25 @@ /// .ThemeGrid_Container { - margin: $token-scale-0 auto; + margin: variables.$token-scale-0 auto; width: 100%; } /// .header { .ThemeGrid_Container { - padding: $token-scale-0 $token-scale-1000; + padding: variables.$token-scale-0 variables.$token-scale-1000; } } /// .layout { .main-content.ThemeGrid_Container { - padding: $token-scale-1000; + padding: variables.$token-scale-1000; } .footer.ThemeGrid_Container { - padding: $token-scale-400 $token-scale-1000; + padding: variables.$token-scale-400 variables.$token-scale-1000; } } @@ -33,16 +35,16 @@ .tablet { .header { .ThemeGrid_Container { - padding: $token-scale-0 $token-scale-600; + padding: variables.$token-scale-0 variables.$token-scale-600; } } .main-content.ThemeGrid_Container { - padding: $token-scale-600; + padding: variables.$token-scale-600; } .footer.ThemeGrid_Container { - padding: $token-scale-400 $token-scale-600; + padding: variables.$token-scale-400 variables.$token-scale-600; } } @@ -50,21 +52,21 @@ .phone { .header { .ThemeGrid_Container { - padding-left: calc(var(--os-safe-area-left) + $token-scale-400); - padding-right: calc(var(--os-safe-area-right) + $token-scale-400); + padding-left: calc(var(--os-safe-area-left) + variables.$token-scale-400); + padding-right: calc(var(--os-safe-area-right) + variables.$token-scale-400); } } .main-content.ThemeGrid_Container { - padding-bottom: $token-scale-400; - padding-left: calc(var(--os-safe-area-left) + $token-scale-400); - padding-right: calc(var(--os-safe-area-right) + $token-scale-400); - padding-top: $token-scale-400; + padding-bottom: variables.$token-scale-400; + padding-left: calc(var(--os-safe-area-left) + variables.$token-scale-400); + padding-right: calc(var(--os-safe-area-right) + variables.$token-scale-400); + padding-top: variables.$token-scale-400; } .footer.ThemeGrid_Container { - padding-left: calc(var(--os-safe-area-left) + $token-scale-400); - padding-right: calc(var(--os-safe-area-right) + $token-scale-400); + padding-left: calc(var(--os-safe-area-left) + variables.$token-scale-400); + padding-right: calc(var(--os-safe-area-right) + variables.$token-scale-400); } } @@ -73,7 +75,7 @@ /// .layout-native { .main-content.ThemeGrid_Container { - padding: $token-scale-0; + padding: variables.$token-scale-0; } } diff --git a/src/scss/03-widgets/_btn.scss b/src/scss/03-widgets/_btn.scss index 0028b2f4fc..16a3eb9c47 100644 --- a/src/scss/03-widgets/_btn.scss +++ b/src/scss/03-widgets/_btn.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Widgets - Button */ //// /// @group Widgets-Button @@ -8,35 +10,35 @@ // ─── Component CSS API ───────────────────────────────────────────── // Unmodified .btn maps to the Figma "Secondary" type: solid neutral-bold fill, // inverse text, border-color matching the fill (no visible outline). - --osui-btn-height: #{$token-scale-1000}; - --osui-btn-background: #{$token-bg-neutral-bold-default}; + --osui-btn-height: #{variables.$token-scale-1000}; + --osui-btn-background: #{variables.$token-bg-neutral-bold-default}; --osui-btn-color: var(--color-text-inverse); - --osui-btn-border-color: #{$token-bg-neutral-bold-default}; + --osui-btn-border-color: #{variables.$token-bg-neutral-bold-default}; // Hover/active read through these two vars regardless of variant — each // variant below only needs to override them with its own token tier. - --osui-btn-hover-background: #{$token-bg-neutral-bold-hover}; - --osui-btn-active-background: #{$token-bg-neutral-bold-press}; - --osui-btn-border-width: #{$token-border-size-025}; + --osui-btn-hover-background: #{variables.$token-bg-neutral-bold-hover}; + --osui-btn-active-background: #{variables.$token-bg-neutral-bold-press}; + --osui-btn-border-width: #{variables.$token-border-size-025}; --osui-btn-border-radius: var(--border-radius-soft); // Disabled keeps the variant's own color visible underneath this wash, // instead of dimming toward the page background via opacity. - --osui-btn-disabled-overlay: #{$token-state-disabled}; + --osui-btn-disabled-overlay: #{variables.$token-state-disabled}; // Primary variant --osui-btn-primary-background: var(--color-primary); --osui-btn-primary-border-color: var(--color-primary); --osui-btn-primary-color: var(--color-text-inverse); // Success variant - --osui-btn-success-background: #{$token-bg-success-base-default}; - --osui-btn-success-border-color: #{$token-bg-success-base-default}; + --osui-btn-success-background: #{variables.$token-bg-success-base-default}; + --osui-btn-success-border-color: #{variables.$token-bg-success-base-default}; --osui-btn-success-color: var(--color-text-inverse); // Error variant - --osui-btn-error-background: #{$token-bg-danger-base-default}; - --osui-btn-error-border-color: #{$token-bg-danger-base-default}; + --osui-btn-error-background: #{variables.$token-bg-danger-base-default}; + --osui-btn-error-border-color: #{variables.$token-bg-danger-base-default}; --osui-btn-error-color: var(--color-text-inverse); // Focus state - --osui-btn-focus-shadow-width: #{$token-border-size-050}; - --osui-btn-focus-shadow-gap: #{$token-scale-050}; - --osui-btn-focus-shadow-color: #{$token-border-focus-default}; + --osui-btn-focus-shadow-width: #{variables.$token-border-size-050}; + --osui-btn-focus-shadow-gap: #{variables.$token-scale-050}; + --osui-btn-focus-shadow-color: #{variables.$token-border-focus-default}; // ─────────────────────────────────────────────────────────────────── align-items: center; @@ -47,19 +49,19 @@ cursor: pointer; display: inline-flex; filter: brightness(1); - font-weight: $token-font-weight-semi-bold; - gap: $token-scale-200; + font-weight: variables.$token-font-weight-semi-bold; + gap: variables.$token-scale-200; height: var(--osui-btn-height); justify-content: center; line-height: var(--osui-font-line-height-full); margin: 0; - padding: $token-scale-0 $token-scale-400; + padding: variables.$token-scale-0 variables.$token-scale-400; position: relative; transition: - background-color $token-transition-time-100 $token-transition-curve-base, - border-color $token-transition-time-100 $token-transition-curve-base, - box-shadow $token-transition-time-100 $token-transition-curve-base, - color $token-transition-time-100 $token-transition-curve-base; + background-color variables.$token-transition-time-100 variables.$token-transition-curve-base, + border-color variables.$token-transition-time-100 variables.$token-transition-curve-base, + box-shadow variables.$token-transition-time-100 variables.$token-transition-curve-base, + color variables.$token-transition-time-100 variables.$token-transition-curve-base; &:active { background-color: var(--osui-btn-active-background); @@ -92,7 +94,7 @@ } & + .btn { - margin-left: $token-scale-600; + margin-left: variables.$token-scale-600; } // Variants @@ -106,14 +108,14 @@ } &-small { - font-size: $token-font-size-300; - height: $token-scale-800; - padding: $token-scale-0 $token-scale-200; + font-size: variables.$token-font-size-300; + height: variables.$token-scale-800; + padding: variables.$token-scale-0 variables.$token-scale-200; } &-large { - font-size: $token-font-size-400; - height: $token-scale-1200; + font-size: variables.$token-font-size-400; + height: variables.$token-scale-1200; } &-cancel { @@ -123,13 +125,13 @@ // Cancel's border never changes across states — only the background // steps through the neutral-subtlest tiers, so the shared :active // rule's border-color needs undoing right here. - --osui-btn-hover-background: #{$token-bg-neutral-subtlest-hover}; - --osui-btn-active-background: #{$token-bg-neutral-subtlest-press}; + --osui-btn-hover-background: #{variables.$token-bg-neutral-subtlest-hover}; + --osui-btn-active-background: #{variables.$token-bg-neutral-subtlest-press}; background-color: var(--osui-btn-background); border: var(--osui-btn-border-width) solid var(--osui-btn-border-color); color: var(--osui-btn-color); - transition: border-color $token-transition-time-150 $token-transition-curve-base; + transition: border-color variables.$token-transition-time-150 variables.$token-transition-curve-base; &:active { border-color: var(--color-border); @@ -137,8 +139,8 @@ } &-success { - --osui-btn-hover-background: #{$token-bg-success-base-hover}; - --osui-btn-active-background: #{$token-bg-success-base-press}; + --osui-btn-hover-background: #{variables.$token-bg-success-base-hover}; + --osui-btn-active-background: #{variables.$token-bg-success-base-press}; background-color: var(--osui-btn-success-background); border: var(--osui-btn-border-width) solid var(--osui-btn-success-border-color); @@ -146,8 +148,8 @@ } &-error { - --osui-btn-hover-background: #{$token-bg-danger-base-hover}; - --osui-btn-active-background: #{$token-bg-danger-base-press}; + --osui-btn-hover-background: #{variables.$token-bg-danger-base-hover}; + --osui-btn-active-background: #{variables.$token-bg-danger-base-press}; background-color: var(--osui-btn-error-background); border: var(--osui-btn-border-width) solid var(--osui-btn-error-border-color); @@ -209,16 +211,16 @@ .tablet, .phone { .btn { - font-size: $token-font-size-400; - height: $token-scale-1200; + font-size: variables.$token-font-size-400; + height: variables.$token-scale-1200; &-small { - font-size: $token-font-size-350; - height: $token-scale-1000; + font-size: variables.$token-font-size-350; + height: variables.$token-scale-1000; } &-large { - height: $token-scale-1400; + height: variables.$token-scale-1400; } } } @@ -232,14 +234,14 @@ width: 100%; & + .btn { - margin-top: $token-scale-400; + margin-top: variables.$token-scale-400; } } .flex-direction-column-reverse { & + .btn { - margin-bottom: $token-scale-400; - margin-top: $token-scale-0; + margin-bottom: variables.$token-scale-400; + margin-top: variables.$token-scale-0; } } } @@ -263,7 +265,7 @@ background-color: transparent; border: 0; color: var(--osui-btn-color); - font-size: $token-font-size-400; + font-size: variables.$token-font-size-400; padding: 0; } } @@ -278,7 +280,7 @@ .bottom-bar { .btn { - padding-bottom: $token-scale-0; + padding-bottom: variables.$token-scale-0; } } } diff --git a/src/scss/03-widgets/_bulk-actions.scss b/src/scss/03-widgets/_bulk-actions.scss index e73ed35d04..2d6ca79775 100644 --- a/src/scss/03-widgets/_bulk-actions.scss +++ b/src/scss/03-widgets/_bulk-actions.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Widgets - Table - Bulk Actions */ //// /// @group Widgets-Table-Bulk_Actions @@ -12,17 +14,17 @@ } [data-checkbox] { - --osui-checkbox-size: #{$token-scale-400}; + --osui-checkbox-size: #{variables.$token-scale-400}; display: block; &:checked:after { - border: $token-border-size-050 solid var(--color-text-inverse); - border-right: $token-border-size-0 !important; - border-top: $token-border-size-0 !important; + border: variables.$token-border-size-050 solid var(--color-text-inverse); + border-right: variables.$token-border-size-0 !important; + border-top: variables.$token-border-size-0 !important; display: block; - height: $token-scale-050; - left: $token-scale-100; + height: variables.$token-scale-050; + left: variables.$token-scale-100; top: 5px; width: 7px; } @@ -30,8 +32,8 @@ .checkbox-intermediate { &:before { - background-color: $token-semantics-primary-base; - border: $token-border-size-025 solid $token-semantics-primary-base; + background-color: variables.$token-semantics-primary-base; + border: variables.$token-border-size-025 solid variables.$token-semantics-primary-base; } &:after { @@ -42,7 +44,7 @@ position: absolute; top: 50%; transform: translateY(-50%) translateX(-50%); - width: $token-scale-200; + width: variables.$token-scale-200; // Service Studio Preview & { diff --git a/src/scss/03-widgets/_button-group.scss b/src/scss/03-widgets/_button-group.scss index 47e79b2402..2ad8a0c453 100644 --- a/src/scss/03-widgets/_button-group.scss +++ b/src/scss/03-widgets/_button-group.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Widgets - Button Group */ //// /// @group Widgets-Button_Group @@ -7,35 +9,35 @@ .button-group { background-color: transparent; border-radius: 0; - padding: $token-scale-200 $token-scale-0; + padding: variables.$token-scale-200 variables.$token-scale-0; &-item { // ─── Component CSS API ───────────────────────────────────────────── --osui-button-group-background: var(--color-background-surface); --osui-button-group-border-color: var(--color-border); --osui-button-group-color: var(--color-text-subtle); - --osui-button-group-disabled-overlay: #{$token-state-disabled}; + --osui-button-group-disabled-overlay: #{variables.$token-state-disabled}; // Matches the default .btn height so a button group sits flush with // buttons placed alongside it, while still growing with larger font // sizes and accessibility settings - --osui-button-group-min-height: #{$token-scale-1000}; + --osui-button-group-min-height: #{variables.$token-scale-1000}; // ─────────────────────────────────────────────────────────────────── background-color: var(--osui-button-group-background); - border: $token-border-size-025 solid var(--osui-button-group-border-color); + border: variables.$token-border-size-025 solid var(--osui-button-group-border-color); border-radius: 0; color: var(--osui-button-group-color); cursor: pointer; - font-size: $token-font-size-400; - font-weight: $token-font-weight-medium; + font-size: variables.$token-font-size-400; + font-weight: variables.$token-font-weight-medium; min-height: var(--osui-button-group-min-height); - padding: $token-scale-0 $token-scale-400; + padding: variables.$token-scale-0 variables.$token-scale-400; position: relative; white-space: nowrap; &:first-child { - border-radius: $token-border-radius-200 $token-border-radius-0 $token-border-radius-0 - $token-border-radius-200; + border-radius: variables.$token-border-radius-200 variables.$token-border-radius-0 variables.$token-border-radius-0 + variables.$token-border-radius-200; } &[disabled] { @@ -51,12 +53,12 @@ &[disabled]:not(:first-child), &:not(:first-child) { - border-left: $token-border-size-0; + border-left: variables.$token-border-size-0; } &:last-child { - border-radius: $token-border-radius-0 $token-border-radius-200 $token-border-radius-200 - $token-border-radius-0; + border-radius: variables.$token-border-radius-0 variables.$token-border-radius-200 variables.$token-border-radius-200 + variables.$token-border-radius-0; } &.button-group-selected-item { @@ -83,7 +85,7 @@ // Neutral (non-selected): matches .btn-cancel:hover — background darkens // one tier, border stays on the resting --color-border role &:not(.button-group-selected-item):not([disabled]):hover { - background-color: $token-bg-neutral-subtlest-hover; + background-color: variables.$token-bg-neutral-subtlest-hover; border-color: var(--color-border); } @@ -102,7 +104,7 @@ .button-group-item { background-color: var(--background-color-header, var(--color-background-header)); border: 0; - border-bottom: $token-border-size-050 solid transparent; + border-bottom: variables.$token-border-size-050 solid transparent; color: var(--color-text-subtlest); &:last-child { @@ -110,7 +112,7 @@ } &.button-group-selected-item { - border-bottom: $token-border-size-050 solid $token-semantics-primary-base; + border-bottom: variables.$token-border-size-050 solid variables.$token-semantics-primary-base; color: var(--color-text); } @@ -118,7 +120,7 @@ color: var(--color-text-disabled); &.button-group-selected-item { - border-bottom: $token-border-size-050 solid var(--color-text-disabled); + border-bottom: variables.$token-border-size-050 solid var(--color-text-disabled); } } } @@ -130,22 +132,22 @@ .is-rtl { .button-group-item { &:first-child { - border-radius: $token-border-radius-0 $token-border-radius-200 $token-border-radius-200 - $token-border-radius-0; + border-radius: variables.$token-border-radius-0 variables.$token-border-radius-200 variables.$token-border-radius-200 + variables.$token-border-radius-0; } &:not(:first-child) { - border-left: $token-border-size-025 solid $token-semantics-primary-base; - border-right: $token-border-size-0; + border-left: variables.$token-border-size-025 solid variables.$token-semantics-primary-base; + border-right: variables.$token-border-size-0; &[disabled] { - border-left: $token-border-size-025 solid var(--color-border); + border-left: variables.$token-border-size-025 solid var(--color-border); } } &:last-child { - border-radius: $token-border-radius-200 $token-border-radius-0 $token-border-radius-0 - $token-border-radius-200; + border-radius: variables.$token-border-radius-200 variables.$token-border-radius-0 variables.$token-border-radius-0 + variables.$token-border-radius-200; } } } @@ -159,7 +161,7 @@ &:before { bottom: -1px; - box-shadow: 0 0 0 $token-border-size-075 var(--color-focus-outer); + box-shadow: 0 0 0 variables.$token-border-size-075 var(--color-focus-outer); content: ''; left: -1px; position: absolute; @@ -183,7 +185,7 @@ right: 0; bottom: 0; left: 0; - border: $token-border-size-075 solid $token-semantics-primary-base; + border: variables.$token-border-size-075 solid variables.$token-semantics-primary-base; } } } diff --git a/src/scss/03-widgets/_checkbox.scss b/src/scss/03-widgets/_checkbox.scss index 9f649161a0..372c67b4af 100644 --- a/src/scss/03-widgets/_checkbox.scss +++ b/src/scss/03-widgets/_checkbox.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Widgets - Checkbox */ //// /// @group Widgets-Checkbox @@ -6,7 +8,7 @@ /// [data-checkbox] { // ─── Component CSS API ───────────────────────────────────────────── - --osui-checkbox-size: #{$token-scale-600}; + --osui-checkbox-size: #{variables.$token-scale-600}; --osui-checkbox-background: var(--color-background-input); --osui-checkbox-border-color: var(--color-border-input); // Same hover tier as .form-control[data-input], so a checkbox and an input @@ -17,18 +19,18 @@ // ─────────────────────────────────────────────────────────────────── height: var(--osui-checkbox-size); - padding: $token-scale-0; + padding: variables.$token-scale-0; width: var(--osui-checkbox-size); &:before { background: var(--osui-checkbox-background); - border: $token-border-size-025 solid var(--osui-checkbox-border-color); + border: variables.$token-border-size-025 solid var(--osui-checkbox-border-color); border-radius: var(--osui-checkbox-border-radius); height: calc(var(--osui-checkbox-size) - 2px); opacity: 1; transition: - background-color var(--osui-motion-duration-180) $token-transition-curve-linear, - border-color var(--osui-motion-duration-180) $token-transition-curve-linear; + background-color var(--osui-motion-duration-180) variables.$token-transition-curve-linear, + border-color var(--osui-motion-duration-180) variables.$token-transition-curve-linear; width: calc(var(--osui-checkbox-size) - 2px); } @@ -41,18 +43,18 @@ &:checked { &:before { background: var(--osui-checkbox-checked-color); - border: $token-border-size-025 solid var(--osui-checkbox-checked-color); + border: variables.$token-border-size-025 solid var(--osui-checkbox-checked-color); } &:after { - border: $token-border-size-075 solid var(--color-text-inverse); - border-right: $token-border-size-0 !important; - border-top: $token-border-size-0 !important; + border: variables.$token-border-size-075 solid var(--color-text-inverse); + border-right: variables.$token-border-size-0 !important; + border-top: variables.$token-border-size-0 !important; display: block; - height: $token-scale-100; + height: variables.$token-scale-100; left: 5px; top: 7px; - width: $token-scale-300; + width: variables.$token-scale-300; } } @@ -62,12 +64,12 @@ &:before, &:checked:before { background-color: var(--color-border-subtle); - border: $token-border-size-025 solid var(--color-border); + border: variables.$token-border-size-025 solid var(--color-border); } &:checked { &:after { - border: $token-border-size-075 solid var(--color-text-disabled); + border: variables.$token-border-size-075 solid var(--color-text-disabled); } } } @@ -78,7 +80,7 @@ .tablet, .phone { [data-checkbox] { - --osui-checkbox-size: #{$token-scale-800}; + --osui-checkbox-size: #{variables.$token-scale-800}; &:checked { &:after { diff --git a/src/scss/03-widgets/_dropdown.scss b/src/scss/03-widgets/_dropdown.scss index e306c54287..7b33905340 100644 --- a/src/scss/03-widgets/_dropdown.scss +++ b/src/scss/03-widgets/_dropdown.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Widgets - Dropdown */ //// /// @group Widgets-Dropdown @@ -8,7 +10,7 @@ // ─── Component CSS API ───────────────────────────────────────────── --osui-dropdown-background: var(--color-background-input); --osui-dropdown-border-color: var(--color-border-input); - --osui-dropdown-border-width: #{$token-border-size-025}; + --osui-dropdown-border-width: #{variables.$token-border-size-025}; --osui-dropdown-color: var(--color-text); --osui-dropdown-border-radius: var(--border-radius-soft); --osui-dropdown-hover-border-color: var(--color-border-input-hover); @@ -17,9 +19,9 @@ --osui-dropdown-list-border-color: var(--color-border); --osui-dropdown-list-max-height: 240px; --osui-dropdown-focus-border-color: var(--color-border-primary); - --osui-dropdown-focus-ring-color: #{$token-border-focus-default}; - --osui-dropdown-arrow-color: #{$token-icon-subtlest}; - --osui-dropdown-arrow-size: #{$token-scale-400}; + --osui-dropdown-focus-ring-color: #{variables.$token-border-focus-default}; + --osui-dropdown-arrow-color: #{variables.$token-icon-subtlest}; + --osui-dropdown-arrow-size: #{variables.$token-scale-400}; // ─────────────────────────────────────────────────────────────────── cursor: initial; @@ -39,9 +41,9 @@ color: var(--osui-dropdown-color); cursor: pointer; display: flex; - font-size: $token-font-size-350; - height: $token-scale-1000; - padding: $token-scale-0 $token-scale-400; + font-size: variables.$token-font-size-350; + height: variables.$token-scale-1000; + padding: variables.$token-scale-0 variables.$token-scale-400; width: 100%; &:hover { @@ -50,7 +52,7 @@ &:focus { border: var(--osui-dropdown-border-width) solid var(--osui-dropdown-focus-border-color); - box-shadow: 0 0 0 $token-border-size-050 var(--osui-dropdown-focus-ring-color); + box-shadow: 0 0 0 variables.$token-border-size-050 var(--osui-dropdown-focus-ring-color); outline: none; } } @@ -76,7 +78,7 @@ &.dropdown-expanded > div.dropdown-display { border: var(--osui-dropdown-border-width) solid var(--osui-dropdown-focus-border-color); - box-shadow: 0 0 0 $token-border-size-050 var(--osui-dropdown-focus-ring-color); + box-shadow: 0 0 0 variables.$token-border-size-050 var(--osui-dropdown-focus-ring-color); } & > div.dropdown-list { @@ -109,7 +111,7 @@ cursor: pointer; display: flex; justify-content: space-between; - padding: #{$token-scale-200} #{$token-scale-400}; + padding: #{variables.$token-scale-200} #{variables.$token-scale-400}; &:hover, &-selected:hover { @@ -122,12 +124,12 @@ // Right-side checkmark — requires --osui-icon-check + --osui-icon-font-family (icon library) &::after { - color: $token-semantics-primary-base; + color: variables.$token-semantics-primary-base; content: var(--osui-icon-check); flex-shrink: 0; font-family: var(--osui-icon-font-family); - font-size: $token-font-size-400; - margin-left: $token-scale-200; + font-size: variables.$token-font-size-400; + margin-left: variables.$token-scale-200; } } @@ -142,7 +144,7 @@ background: none; max-height: 100%; overflow-y: hidden; - padding: $token-scale-0; + padding: variables.$token-scale-0; &:before, &:after { @@ -154,13 +156,13 @@ // Is expanded &-expanded { &-down div.dropdown-list { - margin-top: $token-scale-100; + margin-top: variables.$token-scale-100; top: 100% !important; } &-up div.dropdown-list { bottom: 100% !important; - margin-bottom: $token-scale-100; + margin-bottom: variables.$token-scale-100; top: auto !important; } } @@ -170,12 +172,12 @@ div, select { &.dropdown-display { // Platform sets font-weight: bold as inline style — !important required to override it - font-weight: $token-font-weight-regular !important; + font-weight: variables.$token-font-weight-regular !important; &.dropdown-disabled, &[disabled] { background-color: var(--color-background-input-disabled); - border: $token-border-size-025 solid var(--color-border); + border: variables.$token-border-size-025 solid var(--color-border); color: var(--color-text-disabled); pointer-events: none; } @@ -188,7 +190,7 @@ div { & > span, & > div { - font-size: $token-font-size-350; + font-size: variables.$token-font-size-350; } } } @@ -202,13 +204,13 @@ select.dropdown-display[disabled] { .phone { div.dropdown-display, select.dropdown-display { - font-size: $token-font-size-400; - height: $token-scale-1200; + font-size: variables.$token-font-size-400; + height: variables.$token-scale-1200; .dropdown-display-content { & > span, & > div { - font-size: $token-font-size-400; + font-size: variables.$token-font-size-400; } } } @@ -221,7 +223,7 @@ select.dropdown-display[disabled] { &.dropdown-expanded { & > div.dropdown-display { border-color: var(--color-focus-inner); - box-shadow: 0 0 0 $token-border-size-075 var(--color-focus-outer); + box-shadow: 0 0 0 variables.$token-border-size-075 var(--color-focus-outer); } } diff --git a/src/scss/03-widgets/_feedback-message.scss b/src/scss/03-widgets/_feedback-message.scss index e21c9854f2..b787c35843 100644 --- a/src/scss/03-widgets/_feedback-message.scss +++ b/src/scss/03-widgets/_feedback-message.scss @@ -1,3 +1,6 @@ +@use '../00-abstract/index' as *; +@use "../tokens/variables"; + /* Widgets - Feedback Message */ //// /// @group Widgets-Feedback_Message @@ -10,7 +13,7 @@ --osui-feedback-message-color: var(--color-text); --osui-feedback-message-icon-color: var(--color-text); --osui-feedback-message-border-radius: var(--border-radius-soft); - --osui-feedback-message-box-shadow: #{$token-elevation-3}; + --osui-feedback-message-box-shadow: #{variables.$token-elevation-3}; --osui-feedback-message-max-width: 600px; --osui-feedback-message-min-width: 400px; // ─────────────────────────────────────────────────────────────────── @@ -21,19 +24,19 @@ box-shadow: var(--osui-feedback-message-box-shadow); color: var(--osui-feedback-message-color); display: flex; - font-size: $token-font-size-350; - font-weight: $token-font-weight-medium; - gap: $token-scale-200; + font-size: variables.$token-font-size-350; + font-weight: variables.$token-font-weight-medium; + gap: variables.$token-scale-200; left: 50%; max-width: var(--osui-feedback-message-max-width); min-width: var(--osui-feedback-message-min-width); - padding: $token-scale-300 $token-scale-400; + padding: variables.$token-scale-300 variables.$token-scale-400; i { align-self: flex-start; color: var(--osui-feedback-message-icon-color); - font-size: $token-font-size-500; - margin-top: #{$token-scale-050}; // 2px icon vertical offset + font-size: variables.$token-font-size-500; + margin-top: #{variables.$token-scale-050}; // 2px icon vertical offset position: relative; } } @@ -46,29 +49,29 @@ // Mantain due to Retro Compatibility /// div.feedback-message-error { - --osui-feedback-message-background: #{$token-bg-danger-subtle-default}; - --osui-feedback-message-icon-color: #{$token-icon-danger}; + --osui-feedback-message-background: #{variables.$token-bg-danger-subtle-default}; + --osui-feedback-message-icon-color: #{variables.$token-icon-danger}; } // Mantain due to Retro Compatibility /// div.feedback-message-info { - --osui-feedback-message-background: #{$token-bg-info-subtle-default}; - --osui-feedback-message-icon-color: #{$token-icon-info}; + --osui-feedback-message-background: #{variables.$token-bg-info-subtle-default}; + --osui-feedback-message-icon-color: #{variables.$token-icon-info}; } // Mantain due to Retro Compatibility /// div.feedback-message-success { - --osui-feedback-message-background: #{$token-bg-success-subtle-default}; - --osui-feedback-message-icon-color: #{$token-icon-success}; + --osui-feedback-message-background: #{variables.$token-bg-success-subtle-default}; + --osui-feedback-message-icon-color: #{variables.$token-icon-success}; } // Mantain due to Retro Compatibility /// div.feedback-message-warning { - --osui-feedback-message-background: #{$token-bg-warning-subtle-default}; - --osui-feedback-message-icon-color: #{$token-icon-warning}; + --osui-feedback-message-background: #{variables.$token-bg-warning-subtle-default}; + --osui-feedback-message-icon-color: #{variables.$token-icon-warning}; } // Responsive -------------------------------------------------------------------- @@ -86,13 +89,13 @@ div.feedback-message-warning { &.ios { .feedback-message { - padding-top: calc(var(--os-safe-area-top) + $token-scale-400); + padding-top: calc(var(--os-safe-area-top) + variables.$token-scale-400); } } } .android .feedback-message { - padding-top: calc(#{android-safe-area-top()} + $token-scale-400); + padding-top: calc(#{android-safe-area-top()} + variables.$token-scale-400); } // IsRTL ------------------------------------------------------------------------- @@ -116,20 +119,20 @@ div.feedback-message-warning { /// .os-high-contrast { .feedback-message { - border-width: $token-border-size-075; + border-width: variables.$token-border-size-075; border-style: solid; &.feedback-message-error { - border-color: $token-semantics-danger-base; + border-color: variables.$token-semantics-danger-base; } &.feedback-message-info { - border-color: $token-semantics-info-base; + border-color: variables.$token-semantics-info-base; } &.feedback-message-success { - border-color: $token-semantics-success-base; + border-color: variables.$token-semantics-success-base; } &.feedback-message-warning { - border-color: $token-semantics-warning-base; + border-color: variables.$token-semantics-warning-base; } } } diff --git a/src/scss/03-widgets/_form.scss b/src/scss/03-widgets/_form.scss index 87ab0b7aa3..a686822b9a 100644 --- a/src/scss/03-widgets/_form.scss +++ b/src/scss/03-widgets/_form.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Widgets - Form */ //// /// @group Widgets-Form @@ -12,7 +14,7 @@ } label { - margin-bottom: $token-scale-200; + margin-bottom: variables.$token-scale-200; } .dropdown, @@ -20,7 +22,7 @@ input[data-input], textarea[data-textarea], [data-switch] { - margin-bottom: $token-scale-600; + margin-bottom: variables.$token-scale-600; } span { @@ -52,13 +54,13 @@ } .upload-file span.validation-message { - bottom: $token-scale-200; + bottom: variables.$token-scale-200; position: relative; } .dropdown-container { &[class*='ThemeGrid_Width'].not-valid span.validation-message { - bottom: $token-scale-100; + bottom: variables.$token-scale-100; } &, @@ -83,7 +85,7 @@ textarea[data-textarea] { & + span { &.validation-message { - bottom: $token-scale-100; + bottom: variables.$token-scale-100; } } } @@ -92,8 +94,8 @@ /// span.validation-message { color: var(--color-text-danger); - font-size: $token-font-size-300; - margin-left: $token-scale-0; + font-size: variables.$token-font-size-300; + margin-left: variables.$token-scale-0; } /// @@ -104,7 +106,7 @@ span.validation-message { // Responsive -------------------------------------------------------------------- .phone { .layout-native .form.OSFillParent .form-control[class*='ThemeGrid_Width'].not-valid + span.validation-message { - left: $token-scale-150; + left: variables.$token-scale-150; } .form.OSFillParent span.input-text .form-control[class*='ThemeGrid_Width'].not-valid + span.validation-message, diff --git a/src/scss/03-widgets/_inputs-and-textareas.scss b/src/scss/03-widgets/_inputs-and-textareas.scss index 9f75d483e6..c5072df20a 100644 --- a/src/scss/03-widgets/_inputs-and-textareas.scss +++ b/src/scss/03-widgets/_inputs-and-textareas.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Widgets - Inputs and TextAreas */ //// /// @group Widgets-Input_And_Textarea @@ -26,18 +28,18 @@ --osui-input-color: var(--color-text); --osui-input-border-radius: var(--border-radius-soft); --osui-input-focus-border-color: var(--color-border-primary); - --osui-input-focus-ring-color: #{$token-border-focus-default}; + --osui-input-focus-ring-color: #{variables.$token-border-focus-default}; --osui-input-error-border-color: var(--color-border-danger); // ─────────────────────────────────────────────────────────────────── &[data-input], &[data-textarea] { background-color: var(--osui-input-background); - border: $token-border-size-025 solid var(--osui-input-border-color); + border: variables.$token-border-size-025 solid var(--osui-input-border-color); border-radius: var(--osui-input-border-radius); color: var(--osui-input-color); - font-size: $token-font-size-350; - transition: border-color $token-transition-time-100 $token-transition-curve-base, background-color $token-transition-time-100 $token-transition-curve-base; + font-size: variables.$token-font-size-350; + transition: border-color variables.$token-transition-time-100 variables.$token-transition-curve-base, background-color variables.$token-transition-time-100 variables.$token-transition-curve-base; &:hover { border-color: var(--osui-input-hover-border-color); @@ -45,7 +47,7 @@ &:focus { border-color: var(--osui-input-focus-border-color); - box-shadow: 0 0 0 $token-border-size-050 var(--osui-input-focus-ring-color); + box-shadow: 0 0 0 variables.$token-border-size-050 var(--osui-input-focus-ring-color); outline: none; } @@ -55,19 +57,19 @@ --osui-input-color: var(--color-text-disabled); background-color: var(--osui-input-background); - border: $token-border-size-025 solid var(--osui-input-border-color); + border: variables.$token-border-size-025 solid var(--osui-input-border-color); color: var(--osui-input-color); } } &[data-input] { - height: $token-scale-1000; - padding: $token-scale-0 $token-scale-400; + height: variables.$token-scale-1000; + padding: variables.$token-scale-0 variables.$token-scale-400; } &[data-textarea] { height: auto; - padding: $token-scale-400; + padding: variables.$token-scale-400; resize: auto; } @@ -75,26 +77,26 @@ &.input { &-small { &[data-input] { - font-size: $token-font-size-300; - height: $token-scale-800; - padding: $token-scale-0 $token-scale-200; + font-size: variables.$token-font-size-300; + height: variables.$token-scale-800; + padding: variables.$token-scale-0 variables.$token-scale-200; } &[data-textarea] { - font-size: $token-font-size-300; - padding: $token-scale-200; + font-size: variables.$token-font-size-300; + padding: variables.$token-scale-200; } } /* Large sizes */ &-large { &[data-input] { - font-size: $token-font-size-400; - height: $token-scale-1200; + font-size: variables.$token-font-size-400; + height: variables.$token-scale-1200; } &[data-textarea] { - font-size: $token-font-size-400; + font-size: variables.$token-font-size-400; } } } @@ -103,7 +105,7 @@ &.not-valid { &[data-input], &[data-textarea] { - border: $token-border-size-025 solid var(--osui-input-error-border-color); + border: variables.$token-border-size-025 solid var(--osui-input-error-border-color); } } } @@ -113,29 +115,29 @@ .form label, [data-label] { color: var(--color-text-subtlest); - font-size: $token-font-size-350; - font-weight: $token-font-weight-regular; + font-size: variables.$token-font-size-350; + font-weight: variables.$token-font-weight-regular; line-height: var(--osui-font-line-height-default); } .help-block, .input-helper { color: var(--color-text-subtlest); - font-size: $token-font-size-300; + font-size: variables.$token-font-size-300; line-height: var(--osui-font-line-height-default); - margin-top: $token-scale-100; + margin-top: variables.$token-scale-100; } span.validation-message { color: var(--color-text-danger); display: block; - font-size: $token-font-size-300; - margin-top: $token-scale-100; + font-size: variables.$token-font-size-300; + margin-top: variables.$token-scale-100; } .char-counter { color: var(--color-text-subtlest); - font-size: $token-font-size-300; + font-size: variables.$token-font-size-300; } /* Responsive ----------------------------------------------------------------- */ /// @@ -143,23 +145,23 @@ span.validation-message { .phone { .form-control { &[data-input] { - font-size: $token-font-size-400; - height: $token-scale-1200; + font-size: variables.$token-font-size-400; + height: variables.$token-scale-1200; // Repeated selector since the properties above will ends up in a selector with more specificity &.input-small { - font-size: $token-font-size-300; - height: $token-scale-800; + font-size: variables.$token-font-size-300; + height: variables.$token-scale-800; } } &[data-textarea] { - font-size: $token-font-size-400; + font-size: variables.$token-font-size-400; height: auto; // Repeated selector since the properties above will ends up in a selector with more specificity &.input-small { - font-size: $token-font-size-300; + font-size: variables.$token-font-size-300; } } } @@ -173,11 +175,11 @@ span.validation-message { &[data-input] { background-color: var(--background-color-header, var(--color-background-header)); border: 0; - border-bottom: $token-border-size-025 solid transparent; + border-bottom: variables.$token-border-size-025 solid transparent; border-radius: 0; &:focus { - border-bottom: $token-border-size-025 solid var(--osui-input-focus-border-color); + border-bottom: variables.$token-border-size-025 solid var(--osui-input-focus-border-color); } } } @@ -197,7 +199,7 @@ span.validation-message { } &:focus { - border-color: $token-semantics-primary-base; + border-color: variables.$token-semantics-primary-base; } &.not-valid { diff --git a/src/scss/03-widgets/_list-item.scss b/src/scss/03-widgets/_list-item.scss index c3fbb7295c..64e8860139 100644 --- a/src/scss/03-widgets/_list-item.scss +++ b/src/scss/03-widgets/_list-item.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Widgets - List Item */ //// /// @group Widgets-List_Item @@ -12,11 +14,11 @@ --osui-list-item-selected-background: var(--color-primary-selected); // ─────────────────────────────────────────────────────────────────── - border-bottom: $token-border-size-025 solid var(--osui-list-item-border-color); + border-bottom: variables.$token-border-size-025 solid var(--osui-list-item-border-color); overflow: hidden; - padding: $token-scale-300 $token-scale-600; + padding: variables.$token-scale-300 variables.$token-scale-600; position: relative; - transition: background-color $token-transition-time-100 $token-transition-curve-base; + transition: background-color variables.$token-transition-time-100 variables.$token-transition-curve-base; &:last-of-type { border-bottom: none; @@ -31,7 +33,7 @@ } .scale-animation { - animation: list-item-scale-animation $token-transition-time-1500; + animation: list-item-scale-animation variables.$token-transition-time-1500; background-color: color-mix(in srgb, var(--color-text) 10%, transparent); border-radius: var(--border-radius-rounded); display: block; @@ -57,7 +59,7 @@ /// .layout-native { .list-item { - padding: $token-scale-400; + padding: variables.$token-scale-400; } } @@ -78,7 +80,7 @@ .tablet.landscape { .list { .list-item-selected { - background-color: color-mix(in srgb, #{$token-semantics-primary-base} 10%, #{$token-bg-surface-default}); + background-color: color-mix(in srgb, #{variables.$token-semantics-primary-base} 10%, #{variables.$token-bg-surface-default}); .list-item-content { &-title { @@ -108,9 +110,9 @@ position: relative; &:before { - border: $token-border-size-025 solid $token-semantics-primary-base; - border-right-width: $token-border-size-0; - border-left-width: $token-border-size-075; + border: variables.$token-border-size-025 solid variables.$token-semantics-primary-base; + border-right-width: variables.$token-border-size-0; + border-left-width: variables.$token-border-size-075; bottom: 0; content: ''; display: block; diff --git a/src/scss/03-widgets/_popover.scss b/src/scss/03-widgets/_popover.scss index ae0bd9231c..cadab7fe16 100644 --- a/src/scss/03-widgets/_popover.scss +++ b/src/scss/03-widgets/_popover.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Widgets - Popover */ //// /// @group Widgets-Popover @@ -11,8 +13,8 @@ & > .popover { &-top { - border: $token-border-size-0; - padding: $token-scale-0; + border: variables.$token-border-size-0; + padding: variables.$token-scale-0; } &-bottom { @@ -20,7 +22,7 @@ --osui-popover-background: var(--color-background-surface); --osui-popover-color: var(--color-text); --osui-popover-border-radius: var(--border-radius-soft); - --osui-popover-shadow: #{$token-elevation-2}; + --osui-popover-shadow: #{variables.$token-elevation-2}; --osui-popover-max-width: 350px; // ─────────────────────────────────────────────────────────────────── @@ -30,7 +32,7 @@ color: var(--osui-popover-color); max-width: var(--osui-popover-max-width); min-width: auto; - padding: $token-scale-600; + padding: variables.$token-scale-600; z-index: var(--layer-elevated); } } diff --git a/src/scss/03-widgets/_popup.scss b/src/scss/03-widgets/_popup.scss index bbbdfa304b..39909d1a46 100644 --- a/src/scss/03-widgets/_popup.scss +++ b/src/scss/03-widgets/_popup.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Widgets - Popup */ //// /// @group Widgets-Popup @@ -19,17 +21,17 @@ /// .popup { &-backdrop { - background-color: $token-backdrop; + background-color: variables.$token-backdrop; } &-dialog { // ─── Component CSS API ───────────────────────────────────────────── --osui-popup-background: var(--color-background-surface); --osui-popup-border-color: transparent; - --osui-popup-border-width: #{$token-border-size-025}; + --osui-popup-border-width: #{variables.$token-border-size-025}; --osui-popup-border-radius: var(--border-radius-soft); - --osui-popup-shadow: #{$token-elevation-4}; - --osui-popup-padding: #{$token-scale-600}; + --osui-popup-shadow: #{variables.$token-elevation-4}; + --osui-popup-padding: #{variables.$token-scale-600}; --osui-popup-max-width: 500px; // ─────────────────────────────────────────────────────────────────── @@ -37,8 +39,8 @@ border: var(--osui-popup-border-width) solid var(--osui-popup-border-color); border-radius: var(--osui-popup-border-radius); box-shadow: var(--osui-popup-shadow); - margin: $token-scale-600; - max-height: calc(100% - $token-scale-1000); + margin: variables.$token-scale-600; + max-height: calc(100% - variables.$token-scale-1000); max-width: var(--osui-popup-max-width); overflow: visible; padding: var(--osui-popup-padding); @@ -57,7 +59,7 @@ .popup { &-backdrop, &-dialog { - padding: $token-scale-400; + padding: variables.$token-scale-400; } } } @@ -66,7 +68,7 @@ /// .os-high-contrast { .popup-dialog { - border: $token-border-size-025 solid #{$token-bg-surface-default}; + border: variables.$token-border-size-025 solid #{variables.$token-bg-surface-default}; border-radius: var(--border-radius-soft); } } diff --git a/src/scss/03-widgets/_radio-button.scss b/src/scss/03-widgets/_radio-button.scss index cbd05a02a0..6d25427cc8 100644 --- a/src/scss/03-widgets/_radio-button.scss +++ b/src/scss/03-widgets/_radio-button.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Widgets - Radio Button */ //// /// @group Widgets-Radio_Button @@ -6,16 +8,16 @@ /// .radio-button { // ─── Component CSS API ───────────────────────────────────────────── - --osui-radio-size: #{$token-scale-600}; + --osui-radio-size: #{variables.$token-scale-600}; --osui-radio-background: var(--color-background-input); // Same resting + hover tiers as [data-checkbox] and .form-control[data-input], // so all three form controls share one border progression --osui-radio-border-color: var(--color-border-input); --osui-radio-hover-border-color: var(--color-border-input-hover); --osui-radio-checked-color: var(--color-primary); - --osui-radio-indicator-border: #{$token-scale-150}; + --osui-radio-indicator-border: #{variables.$token-scale-150}; --osui-radio-error-border-color: var(--color-border-danger); - --osui-radio-disabled-border-color: #{$token-border-disabled}; + --osui-radio-disabled-border-color: #{variables.$token-border-disabled}; // ─────────────────────────────────────────────────────────────────── appearance: none; @@ -23,7 +25,7 @@ flex-shrink: 0; height: var(--osui-radio-size); position: relative; - transition: border-color $token-transition-time-100 $token-transition-curve-linear; + transition: border-color variables.$token-transition-time-100 variables.$token-transition-curve-linear; width: var(--osui-radio-size); &:before, @@ -33,15 +35,15 @@ &:before { background-color: var(--osui-radio-background); - border: $token-border-size-025 solid var(--osui-radio-border-color); + border: variables.$token-border-size-025 solid var(--osui-radio-border-color); border-radius: var(--border-radius-rounded); content: ''; display: flex; inset: 0; position: absolute; transition: - border-color $token-transition-time-100 $token-transition-curve-linear, - background-color $token-transition-time-100 $token-transition-curve-linear; + border-color variables.$token-transition-time-100 variables.$token-transition-curve-linear, + background-color variables.$token-transition-time-100 variables.$token-transition-curve-linear; } &:hover:before { @@ -49,7 +51,7 @@ } &:focus-visible:before { - box-shadow: 0 0 0 $token-border-size-075 var(--osui-border-focus-halo); + box-shadow: 0 0 0 variables.$token-border-size-075 var(--osui-border-focus-halo); } &:focus:not(:focus-visible):before { @@ -78,14 +80,14 @@ &:before { background-color: var(--color-background-input-disabled); - border: $token-border-size-025 solid var(--osui-radio-disabled-border-color); + border: variables.$token-border-size-025 solid var(--osui-radio-disabled-border-color); } &:checked:before { background-color: var(--osui-radio-background); // the indicator is drawn as a border, so the disabled overlay is blended into its color directly — // an inset box-shadow would be clipped to the padding box and never paint over the border itself - border: var(--osui-radio-indicator-border) solid color-mix(in srgb, var(--osui-radio-checked-color) 40%, #{$token-primitives-base-white} 60%); + border: var(--osui-radio-indicator-border) solid color-mix(in srgb, var(--osui-radio-checked-color) 40%, #{variables.$token-primitives-base-white} 60%); } } } @@ -105,7 +107,7 @@ width: auto; &:not(:first-of-type) { - margin-left: $token-scale-500; + margin-left: variables.$token-scale-500; } } } @@ -115,7 +117,7 @@ [data-radio-group] { &.not-valid [data-radio-button] .radio-button { &:before { - border: $token-border-size-025 solid var(--osui-radio-error-border-color); + border: variables.$token-border-size-025 solid var(--osui-radio-error-border-color); } &:checked:before { @@ -127,13 +129,13 @@ [data-radio-button] { align-items: center; display: flex; - margin: $token-scale-300 0; + margin: variables.$token-scale-300 0; label { cursor: pointer; line-height: 1; margin-bottom: 0; - margin-left: $token-scale-200; + margin-left: variables.$token-scale-200; } } } @@ -159,24 +161,24 @@ background-color: var(--color-background-input); border-radius: var(--border-radius-rounded); content: ''; - height: $token-scale-300; + height: variables.$token-scale-300; left: 50%; - margin-left: calc(#{$token-scale-300} * -0.5); - margin-top: calc(#{$token-scale-300} * -0.5); + margin-left: calc(#{variables.$token-scale-300} * -0.5); + margin-top: calc(#{variables.$token-scale-300} * -0.5); position: absolute; position: absolute; top: 50%; - width: $token-scale-300; + width: variables.$token-scale-300; } &:focus:before { - background-color: $token-semantics-primary-base; + background-color: variables.$token-semantics-primary-base; border-color: var(--color-text); box-shadow: none; } &:checked:before { - border-color: $token-semantics-primary-base; + border-color: variables.$token-semantics-primary-base; } &:hover:before { @@ -185,15 +187,15 @@ } [data-radio-group].not-valid [data-radio-button] .radio-button:checked:before { - border-color: $token-semantics-primary-base; + border-color: variables.$token-semantics-primary-base; } } // IsRTL ------------------------------------------------------------------------- .is-rtl { [data-radio-group] label { - margin-left: $token-scale-0; - margin-right: $token-scale-200; + margin-left: variables.$token-scale-0; + margin-right: variables.$token-scale-200; } .radio-group { @@ -201,7 +203,7 @@ [data-radio-button] { &:not(:first-of-type) { margin-left: unset; - margin-right: $token-scale-500; + margin-right: variables.$token-scale-500; } } } diff --git a/src/scss/03-widgets/_switch.scss b/src/scss/03-widgets/_switch.scss index 4e6cc473f1..5a9afe31c5 100644 --- a/src/scss/03-widgets/_switch.scss +++ b/src/scss/03-widgets/_switch.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Widgets - Switch */ //// /// @group Widgets-Switch @@ -6,16 +8,16 @@ /// [data-switch] { // ─── Component CSS API ───────────────────────────────────────────── - --osui-switch-height: #{$token-scale-600}; // 24px - --osui-switch-width: #{$token-scale-1000}; // 40px - --osui-switch-thumb-size: #{$token-scale-500}; // 20px + --osui-switch-height: #{variables.$token-scale-600}; // 24px + --osui-switch-width: #{variables.$token-scale-1000}; // 40px + --osui-switch-thumb-size: #{variables.$token-scale-500}; // 20px --osui-switch-thumb-offset-start: 2px; --osui-switch-thumb-offset-end: 18px; - --osui-switch-track-color: #{$token-bg-neutral-base-default}; + --osui-switch-track-color: #{variables.$token-bg-neutral-base-default}; --osui-switch-checked-track-color: var(--color-primary); - --osui-switch-disabled-overlay: #{$token-state-disabled}; - --osui-switch-thumb-color: #{$token-bg-surface-inverse}; - --osui-switch-thumb-shadow: #{$token-elevation-1}; + --osui-switch-disabled-overlay: #{variables.$token-state-disabled}; + --osui-switch-thumb-color: #{variables.$token-bg-surface-inverse}; + --osui-switch-thumb-shadow: #{variables.$token-elevation-1}; // ─────────────────────────────────────────────────────────────────── background-color: transparent; @@ -31,7 +33,7 @@ border-radius: var(--border-radius-rounded); height: var(--osui-switch-height); opacity: 1; - transition: background-color var(--osui-motion-duration-180) $token-transition-curve-linear; + transition: background-color var(--osui-motion-duration-180) variables.$token-transition-curve-linear; width: var(--osui-switch-width); } @@ -45,7 +47,7 @@ margin-left: 0; top: calc((var(--osui-switch-height) - var(--osui-switch-thumb-size)) / 2); transform: translateX(var(--osui-switch-thumb-offset-start)) translateZ(0); - transition: transform var(--osui-motion-duration-180) $token-transition-curve-linear; + transition: transform var(--osui-motion-duration-180) variables.$token-transition-curve-linear; width: var(--osui-switch-thumb-size); } } @@ -83,7 +85,7 @@ } &:focus-visible:empty:before { - box-shadow: 0 0 0 $token-border-size-075 color-mix(in srgb, #{$token-semantics-primary-base} 22%, transparent); + box-shadow: 0 0 0 variables.$token-border-size-075 color-mix(in srgb, #{variables.$token-semantics-primary-base} 22%, transparent); } } @@ -115,7 +117,7 @@ } &:focus:before { - border-color: $token-semantics-primary-base; + border-color: variables.$token-semantics-primary-base; } } } @@ -126,14 +128,14 @@ [data-switch] { &:empty:after { align-items: center; - border: $token-border-size-025 solid var(--color-text-disabled); + border: variables.$token-border-size-025 solid var(--color-text-disabled); content: '0'; display: flex; font-family: monospace; - font-size: $token-font-size-300; + font-size: variables.$token-font-size-300; justify-content: center; left: -1px; - top: $token-scale-075; + top: variables.$token-scale-075; } &:checked:after { diff --git a/src/scss/03-widgets/_table.scss b/src/scss/03-widgets/_table.scss index 02cf56bf33..f5e5e26daa 100644 --- a/src/scss/03-widgets/_table.scss +++ b/src/scss/03-widgets/_table.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Widgets - Table */ //// /// @group Widgets-Table @@ -12,12 +14,12 @@ --osui-table-header-color: var(--color-text-subtlest); --osui-table-cell-background: var(--color-background-surface); --osui-table-row-hover-background: var(--color-background-input-disabled); - --osui-table-row-stripe-background: #{$token-bg-neutral-subtle-default}; + --osui-table-row-stripe-background: #{variables.$token-bg-neutral-subtle-default}; --osui-table-sorted-color: var(--color-text); --osui-table-row-selected-background: var(--color-primary-selected); // ─────────────────────────────────────────────────────────────────── - border: $token-border-size-025 solid var(--osui-table-border-color); + border: variables.$token-border-size-025 solid var(--osui-table-border-color); border-radius: var(--osui-table-border-radius); border-spacing: 0; empty-cells: show; @@ -33,12 +35,12 @@ th { background-color: var(--osui-table-header-background); - border-bottom: $token-border-size-025 solid var(--osui-table-border-color); + border-bottom: variables.$token-border-size-025 solid var(--osui-table-border-color); color: var(--osui-table-header-color); - font-size: $token-font-size-350; - font-weight: $token-font-weight-regular; - height: $token-scale-1200; - padding: $token-scale-0 $token-scale-600; + font-size: variables.$token-font-size-350; + font-weight: variables.$token-font-weight-regular; + height: variables.$token-scale-1200; + padding: variables.$token-scale-0 variables.$token-scale-600; text-align: left; &.sortable { @@ -47,7 +49,7 @@ &.sorted { color: var(--osui-table-sorted-color); - font-weight: $token-font-weight-semi-bold; + font-weight: variables.$token-font-weight-semi-bold; } } } @@ -58,29 +60,29 @@ } &.table-row-selected td { - background: color-mix(in srgb, var(--osui-table-row-selected-background) 10%, #{$token-bg-surface-default}); + background: color-mix(in srgb, var(--osui-table-row-selected-background) 10%, #{variables.$token-bg-surface-default}); } td { background: var(--osui-table-cell-background); - border-bottom: $token-border-size-025 solid var(--osui-table-border-color); + border-bottom: variables.$token-border-size-025 solid var(--osui-table-border-color); color: var(--color-text); - font-size: $token-font-size-350; - height: $token-scale-1600; - padding: $token-scale-200 $token-scale-600; - transition: background-color $token-transition-time-100 ease; // no token match for ease + font-size: variables.$token-font-size-350; + height: variables.$token-scale-1600; + padding: variables.$token-scale-200 variables.$token-scale-600; + transition: background-color variables.$token-transition-time-100 ease; // no token match for ease vertical-align: inherit; } &-small { td { - height: $token-scale-1000; + height: variables.$token-scale-1000; } } &-medium { td { - height: $token-scale-1200; + height: variables.$token-scale-1200; } } @@ -171,7 +173,7 @@ } tr { - border-bottom: $token-border-size-025 solid var(--color-border); + border-bottom: variables.$token-border-size-025 solid var(--color-border); } td { @@ -214,9 +216,9 @@ td { background: var(--osui-table-cell-background); - border-bottom: $token-border-size-025 solid var(--osui-table-border-color); + border-bottom: variables.$token-border-size-025 solid var(--osui-table-border-color); display: table-cell; - padding: $token-scale-200 $token-scale-600; + padding: variables.$token-scale-200 variables.$token-scale-600; vertical-align: inherit; width: auto !important; @@ -273,7 +275,7 @@ /// .has-accessible-features { th.sortable:focus { - box-shadow: 0 0 0 $token-border-size-075 var(--color-focus-outer); + box-shadow: 0 0 0 variables.$token-border-size-075 var(--color-focus-outer); position: relative; z-index: var(--layer-screen); } @@ -301,7 +303,7 @@ } .sortable-icon { - margin-left: $token-scale-0; - right: $token-scale-200; + margin-left: variables.$token-scale-0; + right: variables.$token-scale-200; } } diff --git a/src/scss/03-widgets/_upload.scss b/src/scss/03-widgets/_upload.scss index 48debee103..3b7826d1cd 100644 --- a/src/scss/03-widgets/_upload.scss +++ b/src/scss/03-widgets/_upload.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Widgets - Upload */ //// /// @group Widgets-Upload @@ -8,11 +10,11 @@ // ─── Component CSS API ───────────────────────────────────────────── --osui-upload-background: var(--color-background-surface); --osui-upload-border-color: var(--color-border); - --osui-upload-border-width: #{$token-border-size-025}; - --osui-upload-color: #{$token-text-primary}; + --osui-upload-border-width: #{variables.$token-border-size-025}; + --osui-upload-color: #{variables.$token-text-primary}; --osui-upload-border-radius: var(--border-radius-soft); - --osui-upload-padding: #{$token-scale-400}; - --osui-upload-icon-color: #{$token-icon-subtlest}; + --osui-upload-padding: #{variables.$token-scale-400}; + --osui-upload-icon-color: #{variables.$token-icon-subtlest}; // ─────────────────────────────────────────────────────────────────── align-items: center; @@ -21,8 +23,8 @@ border-radius: var(--osui-upload-border-radius); color: var(--osui-upload-color); display: flex; - font-size: $token-font-size-350; - font-weight: $token-font-weight-medium; + font-size: variables.$token-font-size-350; + font-weight: variables.$token-font-weight-medium; margin-bottom: 0; min-height: auto; padding: var(--osui-upload-padding); @@ -33,9 +35,9 @@ .change-image { background-color: transparent; - color: $token-semantics-primary-base; + color: variables.$token-semantics-primary-base; height: auto; - margin-top: $token-scale-400; + margin-top: variables.$token-scale-400; opacity: 1; position: relative; } @@ -51,12 +53,12 @@ background-color: transparent; color: var(--osui-upload-icon-color); line-height: 1; - margin-right: $token-scale-200; + margin-right: variables.$token-scale-200; width: auto; } &:focus-visible { - border: $token-border-size-025 solid $token-semantics-primary-base; + border: variables.$token-border-size-025 solid variables.$token-semantics-primary-base; } } @@ -65,8 +67,8 @@ .is-rtl { [data-upload] { [data-icon] { - margin-left: $token-scale-200; - margin-right: $token-scale-0; + margin-left: variables.$token-scale-200; + margin-right: variables.$token-scale-0; } } } @@ -75,6 +77,6 @@ /// .has-accessible-features { [data-upload] { - border: $token-border-size-025 solid var(--color-border-input); + border: variables.$token-border-size-025 solid var(--color-border-input); } } diff --git a/src/scss/04-patterns/01-adaptive/_columns.scss b/src/scss/04-patterns/01-adaptive/_columns.scss index 18c36cae15..4676e5a001 100644 --- a/src/scss/04-patterns/01-adaptive/_columns.scss +++ b/src/scss/04-patterns/01-adaptive/_columns.scss @@ -1,3 +1,7 @@ +@use "sass:map"; +@use '../../00-abstract/index' as *; +@use "../../tokens/variables"; + /* Patterns - Adaptive - Columns */ //// /// @group Patterns-Columns @@ -42,12 +46,12 @@ @each $type, $value in $osui-sizes { &.gutter { &-#{$type} { - margin-left: calc(-1 * #{map-get($osui-space-token-vars, $type)} / 2); - margin-right: calc(-1 * #{map-get($osui-space-token-vars, $type)} / 2); + margin-left: calc(-1 * #{map.get($osui-space-token-vars, $type)} / 2); + margin-right: calc(-1 * #{map.get($osui-space-token-vars, $type)} / 2); & > .columns-item { - margin-bottom: #{map-get($osui-space-token-vars, $type)}; - padding: $token-scale-0 calc(#{map-get($osui-space-token-vars, $type)} / 2); + margin-bottom: #{map.get($osui-space-token-vars, $type)}; + padding: variables.$token-scale-0 calc(#{map.get($osui-space-token-vars, $type)} / 2); } .tablet &.tablet-break { @@ -56,7 +60,7 @@ &-middle, &-all { &:only-child > .columns-item:not(:last-child) { - margin-bottom: #{map-get($osui-space-token-vars, $type)}; + margin-bottom: #{map.get($osui-space-token-vars, $type)}; } } } @@ -67,7 +71,7 @@ &-middle, &-all { &:only-child > .columns-item:not(:last-child) { - margin-bottom: #{map-get($osui-space-token-vars, $type)}; + margin-bottom: #{map.get($osui-space-token-vars, $type)}; } } } @@ -79,7 +83,7 @@ // Override gutters rule .columns:only-child > .columns-item { - margin-bottom: $token-scale-0; + margin-bottom: variables.$token-scale-0; } // Responsive -------------------------------------------------------------------- diff --git a/src/scss/04-patterns/01-adaptive/_master-detail.scss b/src/scss/04-patterns/01-adaptive/_master-detail.scss index 8e3d3a40f7..a8ebfad11c 100644 --- a/src/scss/04-patterns/01-adaptive/_master-detail.scss +++ b/src/scss/04-patterns/01-adaptive/_master-detail.scss @@ -1,3 +1,6 @@ +@use '../../00-abstract/index' as *; +@use "../../tokens/variables"; + /* Patterns - Adaptive - Master Detail */ //// /// @group Patterns-Master_Detail @@ -8,7 +11,7 @@ // ─── Component CSS API ───────────────────────────────────────────── --osui-master-detail-background: var(--color-background-surface); --osui-master-detail-border-color: var(--color-border); - --osui-master-detail-border-radius: #{$token-border-radius-0}; + --osui-master-detail-border-radius: #{variables.$token-border-radius-0}; // ─────────────────────────────────────────────────────────────────── background-color: var(--osui-master-detail-background); @@ -36,8 +39,8 @@ .list-item { cursor: pointer; - padding: $token-scale-300 $token-scale-600; - transition: background-color $token-transition-time-100 $token-transition-curve-base; + padding: variables.$token-scale-300 variables.$token-scale-600; + transition: background-color variables.$token-transition-time-100 variables.$token-transition-curve-base; &:hover { background-color: var(--osui-bg-surface-hover); @@ -52,19 +55,19 @@ &[aria-selected='true'], &.list-item-selected { .list-item-content::after { - color: $token-semantics-primary-base; + color: variables.$token-semantics-primary-base; } } } } &-right { - border-left: $token-border-size-025 solid var(--osui-master-detail-border-color); - padding: $token-scale-600; + border-left: variables.$token-border-size-025 solid var(--osui-master-detail-border-color); + padding: variables.$token-scale-600; width: calc(100% - var(--left-percentage)); .split-right-close { - left: calc(var(--os-safe-area-left) + $token-scale-600); + left: calc(var(--os-safe-area-left) + variables.$token-scale-600); position: fixed; top: calc(var(--os-safe-area-right) + (var(--size-header) + var(--token-scale-600, 24px)) / 2); z-index: var(--layer-screen); @@ -77,7 +80,7 @@ a { color: var(--color-text-subtlest); - font-size: $token-font-size-400; + font-size: variables.$token-font-size-400; } } @@ -101,7 +104,7 @@ /// .layout-native { .split-right-close { - left: calc(var(--os-safe-area-left) + $token-scale-600); + left: calc(var(--os-safe-area-left) + variables.$token-scale-600); } } @@ -148,24 +151,24 @@ &-right { background-color: var(--osui-master-detail-background); - border-left: $token-border-size-0; + border-left: variables.$token-border-size-0; height: 100%; left: 0; - padding-bottom: calc(var(--os-safe-area-bottom) + $token-scale-600); - padding-left: calc(var(--os-safe-area-left) + $token-scale-600); - padding-right: calc(var(--os-safe-area-right) + $token-scale-600); + padding-bottom: calc(var(--os-safe-area-bottom) + variables.$token-scale-600); + padding-left: calc(var(--os-safe-area-left) + variables.$token-scale-600); + padding-right: calc(var(--os-safe-area-right) + variables.$token-scale-600); padding-top: calc(var(--os-safe-area-right) + var(--size-header) + var(--token-scale-600, 24px)); position: fixed; top: 0; transform: translateX(100%) translateZ(0); - transition: transform $token-transition-time-100 $token-transition-curve-base; + transition: transform variables.$token-transition-time-100 variables.$token-transition-curve-base; width: 100%; will-change: transform; z-index: calc(var(--layer-above) + var(--layer-navigation)); &.open { transform: translateX(0) translateZ(0); - transition: transform $token-transition-time-200 $token-transition-curve-expressive; + transition: transform variables.$token-transition-time-200 variables.$token-transition-curve-expressive; } // Service Studio Preview @@ -179,14 +182,14 @@ .layout-native { .split-right { - padding-bottom: calc(var(--os-safe-area-bottom) + $token-scale-400); - padding-left: calc(var(--os-safe-area-left) + $token-scale-400); - padding-right: calc(var(--os-safe-area-right) + $token-scale-400); + padding-bottom: calc(var(--os-safe-area-bottom) + variables.$token-scale-400); + padding-left: calc(var(--os-safe-area-left) + variables.$token-scale-400); + padding-right: calc(var(--os-safe-area-right) + variables.$token-scale-400); padding-top: calc(var(--size-header) + var(--os-safe-area-top)); .split-right-close { display: block; - left: calc(var(--os-safe-area-left) + $token-scale-400); + left: calc(var(--os-safe-area-left) + variables.$token-scale-400); } } } @@ -202,7 +205,7 @@ &.ios { .layout-native { .split-right-close { - top: calc(var(--os-safe-area-top) + $token-scale-300); + top: calc(var(--os-safe-area-top) + variables.$token-scale-300); } } } @@ -211,7 +214,7 @@ .android { .layout-native { .split-right-close { - left: $token-scale-400; + left: variables.$token-scale-400; top: calc(#{android-safe-area-top()} + 10px); } } @@ -222,7 +225,7 @@ .is-rtl { .split-right { border-left: 0; - border-right: $token-border-size-025 solid var(--osui-master-detail-border-color); + border-right: variables.$token-border-size-025 solid var(--osui-master-detail-border-color); } } @@ -236,8 +239,8 @@ &:before { bottom: 0; - box-shadow: inset 0 0 0 $token-border-size-075 - color-mix(in srgb, #{$token-semantics-primary-base} 100%, transparent); + box-shadow: inset 0 0 0 variables.$token-border-size-075 + color-mix(in srgb, #{variables.$token-semantics-primary-base} 100%, transparent); content: ''; left: 0; position: absolute; diff --git a/src/scss/04-patterns/01-adaptive/bottom-sheet/_bottomsheet.scss b/src/scss/04-patterns/01-adaptive/bottom-sheet/_bottomsheet.scss index 1d2cfab506..4237260d99 100644 --- a/src/scss/04-patterns/01-adaptive/bottom-sheet/_bottomsheet.scss +++ b/src/scss/04-patterns/01-adaptive/bottom-sheet/_bottomsheet.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/variables"; + /* Patterns - section - BottomSheet */ //// /// @group Patterns-BottomSheet @@ -7,17 +9,17 @@ .osui-bottom-sheet { // ─── Component CSS API ───────────────────────────────────────────── --osui-bottom-sheet-background: var(--color-background-surface); - --osui-bottom-sheet-shadow: #{$token-elevation-3}; - --osui-bottom-sheet-padding: #{$token-scale-400}; - --osui-bottom-sheet-handler-background: #{$token-bg-neutral-subtle-default}; + --osui-bottom-sheet-shadow: #{variables.$token-elevation-3}; + --osui-bottom-sheet-padding: #{variables.$token-scale-400}; + --osui-bottom-sheet-handler-background: #{variables.$token-bg-neutral-subtle-default}; --osui-bottom-sheet-handler-width: 44px; // ─────────────────────────────────────────────────────────────────── --bottom-sheet-max-height: calc(100vh - 54px) /* general value to account for notch and a bit more extra space*/; --border-radius-sharp: none; --border-radius-rounded: var(--border-radius-softer); - --osui-bottom-sheet-draggable-area: #{$token-scale-1400}; - --osui-bottom-sheet-transition-function: #{$token-transition-curve-quick}; + --osui-bottom-sheet-draggable-area: #{variables.$token-scale-1400}; + --osui-bottom-sheet-transition-function: #{variables.$token-transition-curve-quick}; background-color: var(--osui-bottom-sheet-background); border-top-left-radius: var(--bottom-sheet-shape); @@ -29,7 +31,7 @@ min-height: 50vh; position: fixed; text-align: center; - transition: transform $token-transition-time-300 var(--osui-bottom-sheet-transition-function); + transition: transform variables.$token-transition-time-300 var(--osui-bottom-sheet-transition-function); transform: translateY(100%); width: 100%; z-index: var(--osui-bottom-sheet-layer); @@ -41,7 +43,7 @@ .osui-bottom-sheet__content:empty, .osui-bottom-sheet__header__top-bar:empty { -servicestudio-border: 1px dashed var(--color-border-input); - -servicestudio-margin: $token-scale-400; + -servicestudio-margin: variables.$token-scale-400; } } @@ -51,16 +53,16 @@ background: var(--osui-bottom-sheet-handler-background); border-radius: 100px; content: ''; - height: $token-scale-100; + height: variables.$token-scale-100; left: 50%; position: absolute; - top: $token-scale-300; + top: variables.$token-scale-300; transform: translateX(-50%); width: var(--osui-bottom-sheet-handler-width); } &__top-bar { - padding-top: $token-scale-800; + padding-top: variables.$token-scale-800; } } } @@ -95,22 +97,22 @@ } &:not(.osui-bottom-sheet--is-open) { - transition: transform $token-transition-time-200 $token-transition-curve-quick; + transition: transform variables.$token-transition-time-200 variables.$token-transition-curve-quick; + .osui-bottom-sheet-overlay { - transition: opacity $token-transition-time-200 $token-transition-curve-quick; + transition: opacity variables.$token-transition-time-200 variables.$token-transition-curve-quick; } } &-overlay { - background-color: $token-backdrop; + background-color: variables.$token-backdrop; height: 100vh; left: 0; opacity: 0; pointer-events: none; position: fixed; top: 0; - transition: opacity $token-transition-time-300 $token-transition-curve-base; + transition: opacity variables.$token-transition-time-300 variables.$token-transition-curve-base; width: 100vw; z-index: calc(var(--layer-below) + var(--osui-bottom-sheet-layer)); @@ -136,7 +138,7 @@ padding: var(--osui-bottom-sheet-padding); &::before { - box-shadow: $token-elevation-3; + box-shadow: variables.$token-elevation-3; content: ''; height: 100%; left: 0; @@ -144,8 +146,8 @@ position: absolute; transform: translateY(-2px); transition: - opacity $token-transition-time-200 $token-transition-curve-expressive, - transform $token-transition-time-200 var(--osui-bottom-sheet-transition-function); + opacity variables.$token-transition-time-200 variables.$token-transition-curve-expressive, + transform variables.$token-transition-time-200 var(--osui-bottom-sheet-transition-function); top: 0; width: 100%; z-index: var(--layer-global-negative); @@ -161,7 +163,7 @@ max-height: var(--bottom-sheet-max-height); overflow-y: scroll; padding: var(--osui-bottom-sheet-padding); - padding-bottom: calc(var(--size-bottom-bar) + $token-scale-600 + var(--os-safe-area-bottom)); + padding-bottom: calc(var(--size-bottom-bar) + variables.$token-scale-600 + var(--os-safe-area-bottom)); } } @@ -183,8 +185,8 @@ .landscape { .osui-bottom-sheet__header__top-bar, .osui-bottom-sheet__content { - padding-right: calc($token-scale-400 + var(--os-safe-area-right)); - padding-left: calc($token-scale-400 + var(--os-safe-area-left)); + padding-right: calc(variables.$token-scale-400 + var(--os-safe-area-right)); + padding-left: calc(variables.$token-scale-400 + var(--os-safe-area-left)); } } @@ -210,6 +212,6 @@ /// .os-high-contrast { .osui-bottom-sheet { - border: $token-border-size-025 solid var(--color-text-inverse); + border: variables.$token-border-size-025 solid var(--color-text-inverse); } } diff --git a/src/scss/04-patterns/02-content/_alert.scss b/src/scss/04-patterns/02-content/_alert.scss index 5dae490048..68d6d1153e 100644 --- a/src/scss/04-patterns/02-content/_alert.scss +++ b/src/scss/04-patterns/02-content/_alert.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Content - Alert */ //// /// @group Patterns-Alert @@ -9,8 +11,8 @@ --osui-alert-background: transparent; --osui-alert-color: var(--color-text); --osui-alert-accent-color: var(--color-border); - --osui-alert-border-radius: #{$token-border-radius-200}; - --osui-alert-padding: #{$token-scale-300} #{$token-scale-400}; + --osui-alert-border-radius: #{variables.$token-border-radius-200}; + --osui-alert-padding: #{variables.$token-scale-300} #{variables.$token-scale-400}; // ─────────────────────────────────────────────────────────────────── align-items: flex-start; @@ -18,22 +20,22 @@ border-radius: var(--osui-alert-border-radius); color: var(--osui-alert-color); display: flex; - gap: $token-scale-200; + gap: variables.$token-scale-200; padding: var(--osui-alert-padding); - transition: background-color $token-transition-time-100 $token-transition-curve-expressive; + transition: background-color variables.$token-transition-time-100 variables.$token-transition-curve-expressive; .alert-icon { align-self: flex-start; display: inline-flex; flex-shrink: 0; - font-size: $token-font-size-500; - height: $token-scale-500; + font-size: variables.$token-font-size-500; + height: variables.$token-scale-500; line-height: 1; - width: $token-scale-500; + width: variables.$token-scale-500; i, &::after { - font-size: $token-font-size-500; + font-size: variables.$token-font-size-500; } } @@ -43,32 +45,32 @@ .alert-message { flex: 1; - font-size: $token-font-size-350; - font-weight: $token-font-weight-medium; + font-size: variables.$token-font-size-350; + font-weight: variables.$token-font-weight-medium; line-height: var(--osui-font-line-height-default); } &-info { - --osui-alert-background: #{$token-bg-info-subtle-default}; - --osui-alert-color: #{$token-text-info}; + --osui-alert-background: #{variables.$token-bg-info-subtle-default}; + --osui-alert-color: #{variables.$token-text-info}; --osui-alert-accent-color: var(--color-info); } &-success { - --osui-alert-background: #{$token-bg-success-subtle-default}; - --osui-alert-color: #{$token-text-success}; + --osui-alert-background: #{variables.$token-bg-success-subtle-default}; + --osui-alert-color: #{variables.$token-text-success}; --osui-alert-accent-color: var(--color-success); } &-error { - --osui-alert-background: #{$token-bg-danger-subtle-default}; - --osui-alert-color: #{$token-text-danger}; + --osui-alert-background: #{variables.$token-bg-danger-subtle-default}; + --osui-alert-color: #{variables.$token-text-danger}; --osui-alert-accent-color: var(--color-error); } &-warning { - --osui-alert-background: #{$token-bg-warning-subtle-default}; - --osui-alert-color: #{$token-text-warning}; + --osui-alert-background: #{variables.$token-bg-warning-subtle-default}; + --osui-alert-color: #{variables.$token-text-warning}; --osui-alert-accent-color: var(--color-warning); } } @@ -77,7 +79,7 @@ /// .is-rtl { .alert-icon { - margin-left: $token-scale-400; + margin-left: variables.$token-scale-400; margin-right: 0; } } diff --git a/src/scss/04-patterns/02-content/_blank-slate.scss b/src/scss/04-patterns/02-content/_blank-slate.scss index de506353e7..3ded45d773 100644 --- a/src/scss/04-patterns/02-content/_blank-slate.scss +++ b/src/scss/04-patterns/02-content/_blank-slate.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Content - Blank Slate */ //// /// @group Patterns-Blank_Slate @@ -23,17 +25,17 @@ } & .blank-slate-actions { - padding: $token-scale-1200 $token-scale-400; + padding: variables.$token-scale-1200 variables.$token-scale-400; } } &-description { color: var(--osui-blank-slate-description-color); - padding: $token-scale-0 $token-scale-400; + padding: variables.$token-scale-0 variables.$token-scale-400; } &-actions { - padding: $token-scale-400; + padding: variables.$token-scale-400; } &-icon { diff --git a/src/scss/04-patterns/02-content/_card-background.scss b/src/scss/04-patterns/02-content/_card-background.scss index 54fa104b09..453dd87fce 100644 --- a/src/scss/04-patterns/02-content/_card-background.scss +++ b/src/scss/04-patterns/02-content/_card-background.scss @@ -1,3 +1,6 @@ +@use '../../00-abstract/index' as *; +@use "../../tokens/variables"; + /* Patterns - Content - Card Background */ //// /// @group Patterns-Card_Background @@ -10,7 +13,7 @@ color: var(--color-text-inverse); display: flex; overflow: hidden; - padding: $token-scale-600; + padding: variables.$token-scale-600; position: relative; // Service Studio Preview @@ -94,10 +97,10 @@ /// .layout-native { .card-background { - padding: $token-scale-400; + padding: variables.$token-scale-400; &.padding-none { - padding: $token-scale-0; + padding: variables.$token-scale-0; } } } diff --git a/src/scss/04-patterns/02-content/_card-item.scss b/src/scss/04-patterns/02-content/_card-item.scss index 0a3a1b877f..e026829b25 100644 --- a/src/scss/04-patterns/02-content/_card-item.scss +++ b/src/scss/04-patterns/02-content/_card-item.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Content - CardItem */ //// /// @group Patterns-Card_Item @@ -15,7 +17,7 @@ &-left { max-width: 120px; - padding-right: $token-scale-400; + padding-right: variables.$token-scale-400; } &-center { @@ -23,13 +25,13 @@ } &-right { - padding-left: $token-scale-400; + padding-left: variables.$token-scale-400; } &-title { color: var(--osui-card-detail-title-color); - font-size: $token-font-size-500; - font-weight: $token-font-weight-semi-bold; + font-size: variables.$token-font-size-500; + font-weight: variables.$token-font-weight-semi-bold; } &-text { @@ -44,13 +46,13 @@ .is-rtl { .card-detail { &-left { - padding-left: $token-scale-400; + padding-left: variables.$token-scale-400; padding-right: 0; } &-right { padding-left: 0; - padding-right: $token-scale-400; + padding-right: variables.$token-scale-400; } } } diff --git a/src/scss/04-patterns/02-content/_card-sectioned.scss b/src/scss/04-patterns/02-content/_card-sectioned.scss index 365577811a..cef19c662b 100644 --- a/src/scss/04-patterns/02-content/_card-sectioned.scss +++ b/src/scss/04-patterns/02-content/_card-sectioned.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Content - Card Sectioned */ //// /// @group Patterns-Card_Sectioned @@ -8,7 +10,7 @@ &-sectioned { display: flex; justify-content: space-between; - padding: $token-scale-0; + padding: variables.$token-scale-0; &-top { display: flex; @@ -18,19 +20,19 @@ &.flex-direction-row { .card { &-image { - padding: $token-scale-0; + padding: variables.$token-scale-0; &.padding-none { - padding: $token-scale-0; + padding: variables.$token-scale-0; } } &-sectioned-right .card-image { order: 2; - padding: $token-scale-0; + padding: variables.$token-scale-0; &.padding-none { - padding: $token-scale-0; + padding: variables.$token-scale-0; } } } @@ -38,7 +40,7 @@ } &-image { - padding: $token-scale-0; + padding: variables.$token-scale-0; & img { display: block; @@ -48,22 +50,22 @@ &-title { color: var(--color-text); - font-size: $token-font-size-550; - font-weight: $token-font-weight-semi-bold; - padding: $token-scale-600 $token-scale-600 $token-scale-0 $token-scale-600; + font-size: variables.$token-font-size-550; + font-weight: variables.$token-font-weight-semi-bold; + padding: variables.$token-scale-600 variables.$token-scale-600 variables.$token-scale-0 variables.$token-scale-600; } &-content { flex: 1; - padding: $token-scale-600; + padding: variables.$token-scale-600; } &-bottom { align-items: center; background-color: var(--osui-bg-surface-subtle); - border-top: $token-border-size-025 solid var(--osui-border-subtle); + border-top: variables.$token-border-size-025 solid var(--osui-border-subtle); display: flex; - padding: var(--osui-scale-350) $token-scale-500; + padding: var(--osui-scale-350) variables.$token-scale-500; .btn { width: 100%; @@ -78,36 +80,36 @@ padding: 0; &.flex-direction-row .card-image { - padding: $token-scale-0; + padding: variables.$token-scale-0; &.padding-none { - padding: $token-scale-0; + padding: variables.$token-scale-0; } } } &-title { - padding: $token-scale-400 $token-scale-400 $token-scale-0 $token-scale-400; + padding: variables.$token-scale-400 variables.$token-scale-400 variables.$token-scale-0 variables.$token-scale-400; } &-image { - padding: $token-scale-0; + padding: variables.$token-scale-0; &.padding-none { - padding: $token-scale-0; + padding: variables.$token-scale-0; } } &-content { - padding: $token-scale-400; + padding: variables.$token-scale-400; &.padding-none { - padding: $token-scale-0; + padding: variables.$token-scale-0; } } &-bottom { - padding: $token-scale-0 $token-scale-400 $token-scale-400; + padding: variables.$token-scale-0 variables.$token-scale-400 variables.$token-scale-400; } } } @@ -116,12 +118,12 @@ /// .tablet { .card-title { - font-size: calc($token-font-size-550 - 1px); + font-size: calc(variables.$token-font-size-550 - 1px); } } .phone { .card-title { - font-size: calc($token-font-size-550 - 2px); + font-size: calc(variables.$token-font-size-550 - 2px); } } diff --git a/src/scss/04-patterns/02-content/_card.scss b/src/scss/04-patterns/02-content/_card.scss index 845889b9c6..2beb5d21c4 100644 --- a/src/scss/04-patterns/02-content/_card.scss +++ b/src/scss/04-patterns/02-content/_card.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Content - Card */ //// /// @group Patterns-Card @@ -7,11 +9,11 @@ .card { // ─── Component CSS API ───────────────────────────────────────────── --osui-card-background: var(--color-background-surface); - --osui-card-border-color: #{$token-border-subtle}; - --osui-card-border-width: #{$token-border-size-025}; + --osui-card-border-color: #{variables.$token-border-subtle}; + --osui-card-border-width: #{variables.$token-border-size-025}; --osui-card-border-radius: var(--border-radius-soft); - --osui-card-padding: #{$token-scale-600}; - --osui-card-shadow: #{$token-elevation-1}; + --osui-card-padding: #{variables.$token-scale-600}; + --osui-card-shadow: #{variables.$token-elevation-1}; // ─────────────────────────────────────────────────────────────────── background-color: var(--osui-card-background); @@ -26,6 +28,6 @@ /// .layout-native { & .card { - padding: $token-scale-400; + padding: variables.$token-scale-400; } } diff --git a/src/scss/04-patterns/02-content/_chat-message.scss b/src/scss/04-patterns/02-content/_chat-message.scss index 4d65ce90ab..f54fe9349c 100644 --- a/src/scss/04-patterns/02-content/_chat-message.scss +++ b/src/scss/04-patterns/02-content/_chat-message.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Content - Chat Message */ //// /// @group Patterns-Chat_Message @@ -6,8 +8,8 @@ /// .chat { // ─── Component CSS API ───────────────────────────────────────────── - --osui-chat-message-background: #{$token-bg-neutral-subtle-default}; - --osui-chat-message-border-radius: #{$token-border-radius-200}; + --osui-chat-message-background: #{variables.$token-bg-neutral-subtle-default}; + --osui-chat-message-border-radius: #{variables.$token-border-radius-200}; --osui-chat-message-sent-background: var(--color-primary); --osui-chat-message-sent-color: var(--color-text-inverse); // ─────────────────────────────────────────────────────────────────── @@ -19,8 +21,8 @@ .chat { &-photo { - margin-left: $token-scale-400; - margin-right: $token-scale-0; + margin-left: variables.$token-scale-400; + margin-right: variables.$token-scale-0; } &-message { @@ -32,13 +34,13 @@ } &-photo { - margin-right: $token-scale-400; + margin-right: variables.$token-scale-400; img { border-radius: var(--border-radius-rounded); - height: $token-scale-1000; + height: variables.$token-scale-1000; object-fit: cover; - width: $token-scale-1000; + width: variables.$token-scale-1000; } } @@ -48,14 +50,14 @@ display: flex; flex-direction: column; max-width: 600px; - padding: $token-scale-400; + padding: variables.$token-scale-400; position: relative; word-break: break-word; &-status { display: block; - font-size: $token-font-size-300; - margin-top: $token-scale-200; + font-size: variables.$token-font-size-300; + margin-top: variables.$token-scale-200; &.hidden { display: none; @@ -71,14 +73,14 @@ &.right { .chat { &-photo { - margin-left: $token-scale-0; - margin-right: $token-scale-400; + margin-left: variables.$token-scale-0; + margin-right: variables.$token-scale-400; } } } &-photo { - margin-left: $token-scale-400; + margin-left: variables.$token-scale-400; margin-right: 0; } } diff --git a/src/scss/04-patterns/02-content/_floating-content.scss b/src/scss/04-patterns/02-content/_floating-content.scss index 7fdefe8169..1dd013d0f4 100644 --- a/src/scss/04-patterns/02-content/_floating-content.scss +++ b/src/scss/04-patterns/02-content/_floating-content.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Content - Floating Content */ //// /// @group Patterns-Floating_Content @@ -22,7 +24,7 @@ &-height { margin-top: 0; - top: calc(var(--size-header) + $token-scale-400 * 2); + top: calc(var(--size-header) + variables.$token-scale-400 * 2); &.absolute-top { top: var(--os-safe-area-top); @@ -51,19 +53,19 @@ &-top { left: 50%; margin-top: 0; - top: calc(var(--size-header) + $token-scale-400 * 2); + top: calc(var(--size-header) + variables.$token-scale-400 * 2); transform: translateX(-50%); &-left { left: 0; margin-top: 0; - top: calc(var(--size-header) + $token-scale-400 * 2); + top: calc(var(--size-header) + variables.$token-scale-400 * 2); } &-right { margin-top: 0; right: 0; - top: calc(var(--size-header) + $token-scale-400 * 2); + top: calc(var(--size-header) + variables.$token-scale-400 * 2); } } @@ -152,22 +154,22 @@ } &-margin { - margin: $token-scale-800; + margin: variables.$token-scale-800; &.floating-content { &-center { - left: calc(50% - $token-scale-800); - top: calc(50% - $token-scale-800); + left: calc(50% - variables.$token-scale-800); + top: calc(50% - variables.$token-scale-800); } &-left, &-right { - top: calc(50% - $token-scale-800); + top: calc(50% - variables.$token-scale-800); } &-top, &-bottom, &-center { - left: calc(50% - $token-scale-800); + left: calc(50% - variables.$token-scale-800); } } } @@ -190,7 +192,7 @@ } &.floating-content-full-height.floating-content-margin { - margin: $token-scale-800; + margin: variables.$token-scale-800; } } } @@ -330,7 +332,7 @@ .os-high-contrast { .floating { &-button { - border: $token-border-size-050 solid $token-primitives-neutral-700; + border: variables.$token-border-size-050 solid variables.$token-primitives-neutral-700; } } } diff --git a/src/scss/04-patterns/02-content/_list-item-content.scss b/src/scss/04-patterns/02-content/_list-item-content.scss index be191076c8..1914470e7c 100644 --- a/src/scss/04-patterns/02-content/_list-item-content.scss +++ b/src/scss/04-patterns/02-content/_list-item-content.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Content - List Item Content */ //// /// @group Patterns-List_Item_Content @@ -7,7 +9,7 @@ .list-item-content { // ─── Component CSS API ───────────────────────────────────────────── --osui-list-item-content-title-color: var(--color-text); - --osui-list-item-content-text-color: #{$token-primitives-neutral-700}; + --osui-list-item-content-text-color: #{variables.$token-primitives-neutral-700}; // ─────────────────────────────────────────────────────────────────── align-items: center; @@ -15,7 +17,7 @@ &-left { max-width: 120px; - padding-right: $token-scale-400; + padding-right: variables.$token-scale-400; } &-center { @@ -24,7 +26,7 @@ } &-right { - padding-left: $token-scale-400; + padding-left: variables.$token-scale-400; } &-title, @@ -36,8 +38,8 @@ &-title { color: var(--osui-list-item-content-title-color); - line-height: $token-font-line-height-500; - font-weight: $token-font-weight-semi-bold; + line-height: variables.$token-font-line-height-500; + font-weight: variables.$token-font-weight-semi-bold; } &-text { @@ -49,11 +51,11 @@ .layout-native { .list-item-content { &-left { - padding-right: $token-scale-400; + padding-right: variables.$token-scale-400; } &-right { - padding-left: $token-scale-400; + padding-left: variables.$token-scale-400; } } } @@ -62,14 +64,14 @@ /// .tablet { .list-item-content-title { - font-size: calc($token-font-size-500 - 1px); + font-size: calc(variables.$token-font-size-500 - 1px); } } /// .phone { .list-item-content-title { - font-size: calc($token-font-size-500 - 2px); + font-size: calc(variables.$token-font-size-500 - 2px); } } @@ -78,26 +80,26 @@ .is-rtl { .list-item-content { &-left { - padding-left: $token-scale-400; + padding-left: variables.$token-scale-400; padding-right: 0; } &-right { padding-left: 0; - padding-right: $token-scale-400; + padding-right: variables.$token-scale-400; } } .layout-native { .list-item-content { &-left { - padding-left: $token-scale-400; + padding-left: variables.$token-scale-400; padding-right: 0; } &-right { padding-left: 0; - padding-right: $token-scale-400; + padding-right: variables.$token-scale-400; } } } diff --git a/src/scss/04-patterns/02-content/_section.scss b/src/scss/04-patterns/02-content/_section.scss index 8828e36c09..b7d9789aa2 100644 --- a/src/scss/04-patterns/02-content/_section.scss +++ b/src/scss/04-patterns/02-content/_section.scss @@ -1,3 +1,6 @@ +@use '../../00-abstract/index' as *; +@use "../../tokens/variables"; + /* Patterns - Content - Section */ //// /// @group Patterns-Section @@ -12,18 +15,18 @@ &-title { background-color: transparent; - border-bottom: $token-border-size-025 solid var(--osui-section-title-border-color); + border-bottom: variables.$token-border-size-025 solid var(--osui-section-title-border-color); color: var(--osui-section-title-color); - font-size: $token-font-size-500; - font-weight: $token-font-weight-semi-bold; - padding: $token-scale-0 $token-scale-0 $token-scale-200 $token-scale-0; + font-size: variables.$token-font-size-500; + font-weight: variables.$token-font-weight-semi-bold; + padding: variables.$token-scale-0 variables.$token-scale-0 variables.$token-scale-200 variables.$token-scale-0; position: relative; text-transform: none; width: 100%; } &-content { - padding: $token-scale-200 $token-scale-0 $token-scale-0; + padding: variables.$token-scale-200 variables.$token-scale-0 variables.$token-scale-0; } &-group { @@ -46,7 +49,7 @@ .layout-native { .section { &-title { - padding: $token-scale-200 $token-scale-400 $token-scale-200 $token-scale-400; + padding: variables.$token-scale-200 variables.$token-scale-400 variables.$token-scale-200 variables.$token-scale-400; } &-content { @@ -93,6 +96,6 @@ .tablet, .phone { .section-title { - font-size: $token-font-size-500; + font-size: variables.$token-font-size-500; } } diff --git a/src/scss/04-patterns/02-content/_tag.scss b/src/scss/04-patterns/02-content/_tag.scss index 89c5642245..ce30550eeb 100644 --- a/src/scss/04-patterns/02-content/_tag.scss +++ b/src/scss/04-patterns/02-content/_tag.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Content - Tag */ //// /// @group Patterns-Tag @@ -14,28 +16,28 @@ align-items: center; color: var(--osui-tag-color); display: inline-flex; - font-size: $token-font-size-300; - font-weight: $token-font-weight-medium; - gap: $token-scale-100; - min-height: $token-scale-500; + font-size: variables.$token-font-size-300; + font-weight: variables.$token-font-weight-medium; + gap: variables.$token-scale-100; + min-height: variables.$token-scale-500; justify-content: center; letter-spacing: 0.01em; // design-spec: no letter-spacing token in system - line-height: $token-font-line-height-full; + line-height: variables.$token-font-line-height-full; min-width: unset; - padding: $token-scale-0 $token-scale-200; + padding: variables.$token-scale-0 variables.$token-scale-200; word-break: normal; &.tag { &-small { font-size: var(--osui-font-size-200); - min-height: $token-scale-400; - padding: $token-scale-0 $token-scale-150; + min-height: variables.$token-scale-400; + padding: variables.$token-scale-0 variables.$token-scale-150; } &-medium { - font-size: $token-font-size-350; - min-height: $token-scale-700; - padding: $token-scale-0 $token-scale-300; + font-size: variables.$token-font-size-350; + min-height: variables.$token-scale-700; + padding: variables.$token-scale-0 variables.$token-scale-300; } } diff --git a/src/scss/04-patterns/02-content/_user-avatar.scss b/src/scss/04-patterns/02-content/_user-avatar.scss index 83f092ca60..9812ae4b23 100644 --- a/src/scss/04-patterns/02-content/_user-avatar.scss +++ b/src/scss/04-patterns/02-content/_user-avatar.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Content - User Avatar */ //// /// @group Patterns-User_Avatar @@ -14,13 +16,13 @@ align-items: center; color: var(--osui-avatar-color); display: inline-flex; - font-size: $token-font-size-300; - font-weight: $token-font-weight-semi-bold; - height: $token-scale-800; + font-size: variables.$token-font-size-300; + font-weight: variables.$token-font-weight-semi-bold; + height: variables.$token-scale-800; justify-content: center; line-height: 1; text-transform: uppercase; - width: $token-scale-800; + width: variables.$token-scale-800; &.background { &-transparent { @@ -53,14 +55,14 @@ &.avatar-small { font-size: var(--osui-font-size-200); - height: $token-scale-600; - width: $token-scale-600; + height: variables.$token-scale-600; + width: variables.$token-scale-600; } &.avatar-medium { - font-size: $token-font-size-400; - height: $token-scale-1000; - width: $token-scale-1000; + font-size: variables.$token-font-size-400; + height: variables.$token-scale-1000; + width: variables.$token-scale-1000; } span { diff --git a/src/scss/04-patterns/02-content/accordion-item/_accordion-item.scss b/src/scss/04-patterns/02-content/accordion-item/_accordion-item.scss index 8183721860..2bba0a91e0 100644 --- a/src/scss/04-patterns/02-content/accordion-item/_accordion-item.scss +++ b/src/scss/04-patterns/02-content/accordion-item/_accordion-item.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/variables"; + /* Patterns - Content - Accordion Item */ //// /// @group Patterns-Accordion_Item @@ -13,20 +15,20 @@ // ─── Component CSS API ───────────────────────────────────────────── --osui-accordion-item-background: var(--color-background-surface); --osui-accordion-item-border-color: var(--color-border-subtle); - --osui-accordion-item-border-width: #{$token-border-size-025}; - --osui-accordion-item-border-radius: #{$token-border-radius-100}; + --osui-accordion-item-border-width: #{variables.$token-border-size-025}; + --osui-accordion-item-border-radius: #{variables.$token-border-radius-100}; --osui-accordion-item-color: var(--color-text); --osui-accordion-item-active-indicator-color: var(--color-primary); - --osui-accordion-item-icon-color: #{$token-icon-primary}; - --osui-accordion-item-title-hover-background: #{$token-primitives-neutral-100}; + --osui-accordion-item-icon-color: #{variables.$token-icon-primary}; + --osui-accordion-item-title-hover-background: #{variables.$token-primitives-neutral-100}; --osui-accordion-item-title-hover-border-color: var(--color-border); // ─────────────────────────────────────────────────────────────────── - --accordion-active-border-size: #{$token-border-size-050}; + --accordion-active-border-size: #{variables.$token-border-size-050}; background-color: var(--osui-accordion-item-background); - border-radius: $token-border-radius-0; + border-radius: variables.$token-border-radius-0; color: var(--osui-accordion-item-color); - font-size: $token-font-size-400; + font-size: variables.$token-font-size-400; position: relative; &__click_zone { @@ -46,7 +48,7 @@ &--is { &-open { > .osui-accordion-item__title { - font-weight: $token-font-weight-semi-bold; + font-weight: variables.$token-font-weight-semi-bold; > .osui-accordion-item__icon { &--caret { @@ -95,11 +97,11 @@ color: var(--osui-accordion-item-color); direction: ltr; display: flex; - font-size: $token-font-size-400; - gap: $token-scale-200; + font-size: variables.$token-font-size-400; + gap: variables.$token-scale-200; justify-content: space-between; line-height: 1; - padding: $token-scale-300 $token-scale-600; + padding: variables.$token-scale-300 variables.$token-scale-600; width: 100%; &:hover { @@ -124,7 +126,7 @@ &__placeholder { align-items: center; display: flex; - gap: $token-scale-200; + gap: variables.$token-scale-200; overflow: hidden; width: 100%; @@ -145,28 +147,28 @@ color: var(--osui-accordion-item-icon-color); display: flex; font-family: FontAwesome; - font-size: $token-font-size-550; - font-weight: $token-font-weight-regular; - height: $token-scale-400; + font-size: variables.$token-font-size-550; + font-weight: variables.$token-font-weight-regular; + height: variables.$token-scale-400; justify-content: center; - transition: transform $token-transition-time-300 $token-transition-curve-expressive; - width: $token-scale-400; + transition: transform variables.$token-transition-time-300 variables.$token-transition-curve-expressive; + width: variables.$token-scale-400; &--plus-minus { &:after { background-color: var(--osui-accordion-item-icon-color); content: ' '; height: 100%; - transition: transform $token-transition-time-300 $token-transition-curve-expressive; - width: $token-border-size-050; + transition: transform variables.$token-transition-time-300 variables.$token-transition-curve-expressive; + width: variables.$token-border-size-050; } &:before { background-color: var(--osui-accordion-item-icon-color); content: ' '; - height: $token-border-size-050; + height: variables.$token-border-size-050; position: absolute; - width: $token-scale-400; + width: variables.$token-scale-400; } } @@ -186,9 +188,9 @@ &__content { display: block; - font-size: $token-font-size-400; + font-size: variables.$token-font-size-400; overflow: hidden; - padding: $token-scale-0 $token-scale-600; + padding: variables.$token-scale-0 variables.$token-scale-600; &--is { &-collapsed { @@ -203,18 +205,18 @@ &-expanded { height: auto; - padding: $token-scale-0 $token-scale-600 $token-scale-600; + padding: variables.$token-scale-0 variables.$token-scale-600 variables.$token-scale-600; visibility: visible; } &-animating { - transition: height $token-transition-time-300 $token-transition-curve-expressive; + transition: height variables.$token-transition-time-300 variables.$token-transition-curve-expressive; } } /* Add a margin-top when animated label is the first child */ [data-block*='AnimatedLabel']:first-child .animated-label { - margin-top: $token-scale-200; + margin-top: variables.$token-scale-200; } } @@ -233,7 +235,7 @@ /// .phone { .osui-accordion-item .osui-accordion-item__title { - font-size: calc($token-font-size-400); + font-size: calc(variables.$token-font-size-400); } } @@ -241,19 +243,19 @@ .layout-native { .osui-accordion-item { &__title { - padding: $token-scale-400; + padding: variables.$token-scale-400; } &__content { - padding: $token-scale-0 $token-scale-400; + padding: variables.$token-scale-0 variables.$token-scale-400; &--is { &-collapsed { - padding: $token-scale-0 $token-scale-400; + padding: variables.$token-scale-0 variables.$token-scale-400; } &-expanded { - padding: $token-scale-0 $token-scale-400 $token-scale-400; + padding: variables.$token-scale-0 variables.$token-scale-400 variables.$token-scale-400; } } } @@ -271,7 +273,7 @@ } &:focus-visible { - outline: $token-border-size-075 solid var(--color-focus-outer); + outline: variables.$token-border-size-075 solid var(--color-focus-outer); } } } @@ -282,6 +284,6 @@ .is-rtl { .osui-accordion-item__title__placeholder { direction: rtl; - margin-right: $token-scale-200; + margin-right: variables.$token-scale-200; } } diff --git a/src/scss/04-patterns/02-content/accordion/_accordion.scss b/src/scss/04-patterns/02-content/accordion/_accordion.scss index ea5a464360..c1f5d089f2 100644 --- a/src/scss/04-patterns/02-content/accordion/_accordion.scss +++ b/src/scss/04-patterns/02-content/accordion/_accordion.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/variables"; + /* Patterns - Content - Accordion */ //// /// @group Patterns-Accordion @@ -8,7 +10,7 @@ // All items inside accordion: no radius & &-item, .list .osui-accordion-item { - border-radius: $token-border-radius-0; + border-radius: variables.$token-border-radius-0; } // Divider: add top border only to items that are not the first @@ -23,8 +25,8 @@ :first-child:not(.list) >, .list :first-child > { .osui-accordion-item { - border-top-left-radius: $token-border-radius-100; - border-top-right-radius: $token-border-radius-100; + border-top-left-radius: variables.$token-border-radius-100; + border-top-right-radius: variables.$token-border-radius-100; } } @@ -32,8 +34,8 @@ :last-child:not(.list) >, .list :last-child > { .osui-accordion-item { - border-bottom-left-radius: $token-border-radius-100; - border-bottom-right-radius: $token-border-radius-100; + border-bottom-left-radius: variables.$token-border-radius-100; + border-bottom-right-radius: variables.$token-border-radius-100; } } @@ -41,14 +43,14 @@ :only-child >, .list :only-child > { .osui-accordion-item { - border-radius: $token-border-radius-100; + border-radius: variables.$token-border-radius-100; } } // ServiceStudio Preview & &-item { & { - -servicestudio-border-bottom-width: $token-border-size-025; + -servicestudio-border-bottom-width: variables.$token-border-size-025; } } } diff --git a/src/scss/04-patterns/02-content/carousel/_carousel.scss b/src/scss/04-patterns/02-content/carousel/_carousel.scss index ef802df044..9186976800 100644 --- a/src/scss/04-patterns/02-content/carousel/_carousel.scss +++ b/src/scss/04-patterns/02-content/carousel/_carousel.scss @@ -3,21 +3,22 @@ /// @group Patterns-Carousel /// Patterns - Interaction - Carousel -@import 'carousel_ss_preview_imgs'; +@use 'carousel_ss_preview_imgs'; +@use "../../../tokens/variables"; /* OutSystems UI Carousel customization */ /// .osui-carousel { // ─── Component CSS API ───────────────────────────────────────────── --osui-carousel-arrow-background: var(--color-background-surface); - --osui-carousel-arrow-shadow: #{$token-elevation-2}; + --osui-carousel-arrow-shadow: #{variables.$token-elevation-2}; --osui-carousel-arrow-icon-color: var(--color-text); - --osui-carousel-arrow-disabled-overlay: #{$token-state-disabled}; + --osui-carousel-arrow-disabled-overlay: #{variables.$token-state-disabled}; --osui-carousel-pagination-color: var(--color-border); --osui-carousel-pagination-active-color: var(--color-primary); --osui-carousel-track-width: 100%; // Reserved space below the track: pagination row height ($token-scale-600) + 16px gap ($token-scale-400) - --osui-carousel-pagination-margin: #{$token-scale-1000}; + --osui-carousel-pagination-margin: #{variables.$token-scale-1000}; // ─────────────────────────────────────────────────────────────────── @@ -25,10 +26,10 @@ &__arrow { background-color: var(--osui-carousel-arrow-background); box-shadow: var(--osui-carousel-arrow-shadow); - height: $token-scale-1000; + height: variables.$token-scale-1000; opacity: 1; - transition: opacity $token-transition-time-150 $token-transition-curve-linear; - width: $token-scale-1000; + transition: opacity variables.$token-transition-time-150 variables.$token-transition-curve-linear; + width: variables.$token-scale-1000; will-change: opacity; z-index: var(--layer-local-tier-1); @@ -49,8 +50,8 @@ } svg { - height: $token-scale-600; - width: $token-scale-600; + height: variables.$token-scale-600; + width: variables.$token-scale-600; path { fill: var(--osui-carousel-arrow-icon-color); @@ -64,24 +65,24 @@ } &__pagination { - gap: $token-space-200; + gap: variables.$token-space-200; margin: 0; z-index: var(--layer-local-tier-1); li { align-items: center; display: flex; - height: $token-scale-600; + height: variables.$token-scale-600; justify-content: center; - width: $token-scale-600; + width: variables.$token-scale-600; } &__page { background-color: var(--osui-carousel-pagination-color); border-radius: var(--border-radius-rounded); - height: $token-scale-300; - width: $token-scale-300; - transition: background-color $token-transition-time-200 $token-transition-curve-linear; + height: variables.$token-scale-300; + width: variables.$token-scale-300; + transition: background-color variables.$token-transition-time-200 variables.$token-transition-curve-linear; &.is-active { background-color: var(--osui-carousel-pagination-active-color); @@ -148,7 +149,7 @@ } &__track { - border-radius: $token-border-radius-300; + border-radius: variables.$token-border-radius-300; max-width: 100%; width: var(--osui-carousel-track-width); z-index: var(--layer-screen); @@ -170,8 +171,8 @@ -servicestudio-left: 0; -servicestudio-width: 100%; -servicestudio-height: 100%; - -servicestudio-background-color: $token-bg-surface-default; - -servicestudio-background-image: $carousel_helper_img_base64; + -servicestudio-background-color: variables.$token-bg-surface-default; + -servicestudio-background-image: carousel_ss_preview_imgs.$carousel_helper_img_base64; -servicestudio-background-repeat: no-repeat; -servicestudio-background-position: center; -servicestudio-z-index: var(--layer-local-tier-2); @@ -192,11 +193,11 @@ .os-high-contrast { .splide__pagination { &__page { - outline: $token-border-size-075 solid var(--color-focus-outer); + outline: variables.$token-border-size-075 solid var(--color-focus-outer); } li { - margin: $token-scale-0 $token-scale-100; + margin: variables.$token-scale-0 variables.$token-scale-100; } } } diff --git a/src/scss/04-patterns/02-content/flip-content/_flipcontent.scss b/src/scss/04-patterns/02-content/flip-content/_flipcontent.scss index 647fca2b56..9c13d032c1 100644 --- a/src/scss/04-patterns/02-content/flip-content/_flipcontent.scss +++ b/src/scss/04-patterns/02-content/flip-content/_flipcontent.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/variables"; + /* Patterns - Content - Flip_Content */ //// /// @group Patterns-Flip_Content @@ -40,7 +42,7 @@ cursor: default; position: relative; transform-style: preserve-3d; - transition: transform $token-transition-time-500 $token-transition-curve-bounce; + transition: transform variables.$token-transition-time-500 variables.$token-transition-curve-bounce; &--flip-self { cursor: pointer; diff --git a/src/scss/04-patterns/02-content/video/_video.scss b/src/scss/04-patterns/02-content/video/_video.scss index 88b7e51b16..26e803983c 100644 --- a/src/scss/04-patterns/02-content/video/_video.scss +++ b/src/scss/04-patterns/02-content/video/_video.scss @@ -1,8 +1,8 @@ -@import '_video_ss_preview_imgs'; +@use '_video_ss_preview_imgs'; /// .osui-video { // ServiceStudio Preview - -servicestudio-background-image: $video_img_base64; + -servicestudio-background-image: video_ss_preview_imgs.$video_img_base64; -servicestudio-background-position: top center; -servicestudio-background-repeat: no-repeat; -servicestudio-background-size: cover; diff --git a/src/scss/04-patterns/03-interaction/_action-sheet.scss b/src/scss/04-patterns/03-interaction/_action-sheet.scss index c1c10d572a..f48ad8a90a 100644 --- a/src/scss/04-patterns/03-interaction/_action-sheet.scss +++ b/src/scss/04-patterns/03-interaction/_action-sheet.scss @@ -1,3 +1,6 @@ +@use '../../00-abstract/index' as *; +@use "../../tokens/variables"; + /* Patterns - Interaction - Action Sheet */ //// /// @group Patterns-Action_Sheet @@ -7,20 +10,20 @@ .action-sheet { // ─── Component CSS API ───────────────────────────────────────────── --osui-action-sheet-background: var(--color-background-surface); - --osui-action-sheet-border-radius: #{$token-border-radius-200}; - --osui-action-sheet-cancel-color: #{$token-text-primary}; - --osui-action-sheet-color: #{$token-text-primary}; - --osui-action-sheet-divider-color: #{$token-border-subtle}; - --osui-action-sheet-shadow: #{$token-elevation-3}; + --osui-action-sheet-border-radius: #{variables.$token-border-radius-200}; + --osui-action-sheet-cancel-color: #{variables.$token-text-primary}; + --osui-action-sheet-color: #{variables.$token-text-primary}; + --osui-action-sheet-divider-color: #{variables.$token-border-subtle}; + --osui-action-sheet-shadow: #{variables.$token-elevation-3}; // ─────────────────────────────────────────────────────────────────── bottom: 0; left: 0; margin-top: 0; - padding-bottom: calc(var(--os-safe-area-bottom) + $token-scale-400); - padding-left: calc(var(--os-safe-area-left) + $token-scale-400); - padding-right: calc(var(--os-safe-area-right) + $token-scale-400); - padding-top: $token-scale-400; + padding-bottom: calc(var(--os-safe-area-bottom) + variables.$token-scale-400); + padding-left: calc(var(--os-safe-area-left) + variables.$token-scale-400); + padding-right: calc(var(--os-safe-area-right) + variables.$token-scale-400); + padding-top: variables.$token-scale-400; pointer-events: auto; position: absolute; transform: translateY(100%); @@ -38,7 +41,7 @@ // ─── Component CSS API ───────────────────────────────────────────── // Declared here (not on .action-sheet): the backdrop ::after below reads // it, and .action-sheet is a child — custom properties don't inherit upward. - --osui-action-sheet-overlay-background: #{$token-backdrop}; + --osui-action-sheet-overlay-background: #{variables.$token-backdrop}; // ─────────────────────────────────────────────────────────────────── height: 100%; @@ -65,7 +68,7 @@ pointer-events: none; position: absolute; top: 0; - transition: opacity $token-transition-time-300 $token-transition-curve-quick; + transition: opacity variables.$token-transition-time-300 variables.$token-transition-curve-quick; width: 100%; will-change: opacity; @@ -87,14 +90,14 @@ } &.action-sheet-container--animatable .action-sheet { - transition: all $token-transition-time-300 $token-transition-curve-quick; + transition: all variables.$token-transition-time-300 variables.$token-transition-curve-quick; } } &--animatable { .action-sheet { - -webkit-transition: all var(--osui-motion-duration-130) $token-transition-curve-base; - transition: all var(--osui-motion-duration-130) $token-transition-curve-base; + -webkit-transition: all var(--osui-motion-duration-130) variables.$token-transition-curve-base; + transition: all var(--osui-motion-duration-130) variables.$token-transition-curve-base; } } } @@ -119,11 +122,11 @@ --osui-btn-background: var(--osui-action-sheet-background); --osui-btn-border-radius: 0; --osui-btn-color: var(--osui-action-sheet-color); - --osui-btn-height: #{$token-scale-1100}; - --osui-btn-hover-background: #{$token-bg-neutral-subtlest-hover}; - --osui-btn-active-background: #{$token-bg-neutral-subtlest-press}; + --osui-btn-height: #{variables.$token-scale-1100}; + --osui-btn-hover-background: #{variables.$token-bg-neutral-subtlest-hover}; + --osui-btn-active-background: #{variables.$token-bg-neutral-subtlest-press}; - @include apply-typography($token-body-action-sm); + @include apply-typography(variables.$token-body-action-sm); border: none; margin-top: 1px; @@ -136,17 +139,17 @@ } &-cancel { - margin-top: $token-scale-200; + margin-top: variables.$token-scale-200; .btn { --osui-btn-background: var(--osui-action-sheet-background); --osui-btn-border-radius: var(--osui-action-sheet-border-radius); --osui-btn-color: var(--osui-action-sheet-cancel-color); - --osui-btn-height: #{$token-scale-1100}; - --osui-btn-hover-background: #{$token-bg-neutral-subtlest-hover}; - --osui-btn-active-background: #{$token-bg-neutral-subtlest-press}; + --osui-btn-height: #{variables.$token-scale-1100}; + --osui-btn-hover-background: #{variables.$token-bg-neutral-subtlest-hover}; + --osui-btn-active-background: #{variables.$token-bg-neutral-subtlest-press}; - @include apply-typography($token-body-action-sm); + @include apply-typography(variables.$token-body-action-sm); border: none; box-shadow: var(--osui-action-sheet-shadow); @@ -171,11 +174,11 @@ .action-sheet { &-buttons, &-cancel { - margin: $token-scale-0 auto; + margin: variables.$token-scale-0 auto; } &-cancel { - margin: $token-scale-400 auto $token-scale-0; + margin: variables.$token-scale-400 auto variables.$token-scale-0; } } } @@ -194,7 +197,7 @@ .os-high-contrast { .action-sheet-container--visible .action-sheet { background-color: var(--osui-action-sheet-background); - box-shadow: inset 0 0 0 $token-border-size-075 var(--color-focus-outer); + box-shadow: inset 0 0 0 variables.$token-border-size-075 var(--color-focus-outer); } .action-sheet-actions { diff --git a/src/scss/04-patterns/03-interaction/_floating-actions.scss b/src/scss/04-patterns/03-interaction/_floating-actions.scss index ce524c90f5..6862dd6c17 100644 --- a/src/scss/04-patterns/03-interaction/_floating-actions.scss +++ b/src/scss/04-patterns/03-interaction/_floating-actions.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Interaction - Floating Actions */ //// /// @group Patterns-Floating_Actions @@ -13,22 +15,22 @@ &-actions-wrapper { // ─── Component CSS API ───────────────────────────────────────────── --osui-floating-actions-button-background: var(--color-primary); - --osui-floating-actions-button-background-hover: #{$token-semantics-primary-800}; - --osui-floating-actions-button-background-press: #{$token-bg-primary-base-press}; + --osui-floating-actions-button-background-hover: #{variables.$token-semantics-primary-800}; + --osui-floating-actions-button-background-press: #{variables.$token-bg-primary-base-press}; --osui-floating-actions-button-color: var(--color-text-inverse); - --osui-floating-actions-button-shadow: #{$token-elevation-3}; + --osui-floating-actions-button-shadow: #{variables.$token-elevation-3}; --osui-floating-actions-item-background: var(--color-background-surface); - --osui-floating-actions-item-background-hover: #{$token-primitives-neutral-100}; - --osui-floating-actions-item-background-press: #{$token-bg-neutral-subtlest-press}; + --osui-floating-actions-item-background-hover: #{variables.$token-primitives-neutral-100}; + --osui-floating-actions-item-background-press: #{variables.$token-bg-neutral-subtlest-press}; --osui-floating-actions-item-color: var(--color-text); - --osui-floating-actions-item-shadow: #{$token-elevation-2}; + --osui-floating-actions-item-shadow: #{variables.$token-elevation-2}; // ─────────────────────────────────────────────────────────────────── align-items: flex-end; bottom: 0; display: flex; flex-direction: column; - margin: $token-scale-800; + margin: variables.$token-scale-800; position: fixed; right: 0; will-change: transform, opacity; @@ -48,8 +50,8 @@ opacity: 1; transform: translateY(0px) translateZ(0) scale(1); transition: - opacity var(--osui-motion-duration-180) $token-transition-curve-quick, - transform var(--osui-motion-duration-180) $token-transition-curve-quick; + opacity var(--osui-motion-duration-180) variables.$token-transition-curve-quick, + transform var(--osui-motion-duration-180) variables.$token-transition-curve-quick; transition-delay: calc(var(--delay) * 40ms); // design-spec: stagger delay } @@ -65,7 +67,7 @@ } &.bottom-bar-exists { - bottom: calc(var(--size-bottom-bar) + $token-scale-400); + bottom: calc(var(--size-bottom-bar) + variables.$token-scale-400); } &.no-rotation { @@ -92,20 +94,20 @@ align-items: flex-end; display: flex; flex-direction: column; - padding-bottom: $token-scale-200; - padding-right: $token-scale-200; + padding-bottom: variables.$token-scale-200; + padding-right: variables.$token-scale-200; } &-actions-item { align-items: center; display: flex; justify-content: flex-end; - margin-bottom: $token-scale-400; + margin-bottom: variables.$token-scale-400; opacity: 0; - transform: translateY($token-scale-400) translateZ(0); + transform: translateY(variables.$token-scale-400) translateZ(0); transition: - opacity $token-transition-time-100 $token-transition-curve-base, - transform $token-transition-time-100 $token-transition-curve-base; + opacity variables.$token-transition-time-100 variables.$token-transition-curve-base, + transform variables.$token-transition-time-100 variables.$token-transition-curve-base; // Service Studio Preview & { @@ -122,14 +124,14 @@ color: var(--osui-floating-actions-item-color); cursor: pointer; display: flex; - font-size: $token-font-size-400; - height: $token-scale-1000; + font-size: variables.$token-font-size-400; + height: variables.$token-scale-1000; justify-content: center; - margin-left: $token-scale-400; + margin-left: variables.$token-scale-400; transform: translateZ(0) scale(0.3); - transition: transform var(--osui-motion-duration-180) $token-transition-curve-quick; + transition: transform var(--osui-motion-duration-180) variables.$token-transition-curve-quick; transition-delay: calc(var(--delay) * 40ms); // design-spec: stagger delay - width: $token-scale-1000; + width: variables.$token-scale-1000; // Service Studio Preview & { @@ -153,16 +155,16 @@ color: var(--osui-floating-actions-button-color); cursor: pointer; display: flex; - font-size: $token-font-size-550; - height: $token-scale-1400; + font-size: variables.$token-font-size-550; + height: variables.$token-scale-1400; justify-content: center; pointer-events: auto; transform: rotate(0deg) translateZ(0); transform-origin: center center; transition: - transform var(--osui-motion-duration-180) $token-transition-curve-linear, - box-shadow var(--osui-motion-duration-180) $token-transition-curve-linear; - width: $token-scale-1400; + transform var(--osui-motion-duration-180) variables.$token-transition-curve-linear, + box-shadow var(--osui-motion-duration-180) variables.$token-transition-curve-linear; + width: variables.$token-scale-1400; &:hover { background-color: var(--osui-floating-actions-button-background-hover); @@ -174,7 +176,7 @@ } &-overlay { - background-color: $token-backdrop; + background-color: variables.$token-backdrop; cursor: pointer; height: 100vh; opacity: 0; @@ -182,7 +184,7 @@ position: fixed; right: 0; top: 0; - transition: opacity var(--osui-motion-duration-180) $token-transition-curve-base; + transition: opacity var(--osui-motion-duration-180) variables.$token-transition-curve-base; width: 100vw; z-index: var(--osui-floating-actions-layer); @@ -204,7 +206,7 @@ .phone { .layout-native { .floating-actions-wrapper { - margin: $token-scale-400; + margin: variables.$token-scale-400; } } @@ -220,7 +222,7 @@ &.landscape { .layout-native { .floating-actions-wrapper { - margin-right: calc(var(--os-safe-area-right) + $token-scale-400); + margin-right: calc(var(--os-safe-area-right) + variables.$token-scale-400); } } } @@ -242,8 +244,8 @@ /// .is-rtl { .floating-actions-item-button { - margin-left: $token-scale-0; - margin-right: $token-scale-400; + margin-left: variables.$token-scale-0; + margin-right: variables.$token-scale-400; } .floating-actions-wrapper { @@ -256,13 +258,13 @@ /// .has-accessible-features { .floating-button:focus { - box-shadow: 0 0 0 $token-border-size-075 var(--color-focus-outer); + box-shadow: 0 0 0 variables.$token-border-size-075 var(--color-focus-outer); } .floating-actions-wrapper { &.is--open { .floating-button:focus { - box-shadow: 0 0 0 $token-border-size-075 var(--color-focus-outer); + box-shadow: 0 0 0 variables.$token-border-size-075 var(--color-focus-outer); } } } diff --git a/src/scss/04-patterns/03-interaction/_input-with-icon.scss b/src/scss/04-patterns/03-interaction/_input-with-icon.scss index 78b07eb25e..b29dd8d1f8 100644 --- a/src/scss/04-patterns/03-interaction/_input-with-icon.scss +++ b/src/scss/04-patterns/03-interaction/_input-with-icon.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Interaction - Input With Icon */ //// /// @group Patterns-Input_With_Icon @@ -19,8 +21,8 @@ right: 0; &:not(:empty) + .input-with-icon-input input { - padding-left: $token-scale-400; - padding-right: $token-scale-1000; + padding-left: variables.$token-scale-400; + padding-right: variables.$token-scale-1000; } &.search-actions { @@ -36,7 +38,7 @@ height: 100%; left: 0; position: absolute; - width: $token-scale-1000; + width: variables.$token-scale-1000; &, a { @@ -44,7 +46,7 @@ } &:not(:empty) + .input-with-icon-input input { - padding-left: $token-scale-1000; + padding-left: variables.$token-scale-1000; } &.search-actions { @@ -82,7 +84,7 @@ .form { .input-with-icon { .input-with-icon-content-icon { - padding-bottom: $token-scale-600; + padding-bottom: variables.$token-scale-600; z-index: var(--layer-local-tier-1); } diff --git a/src/scss/04-patterns/03-interaction/_lightbox-image.scss b/src/scss/04-patterns/03-interaction/_lightbox-image.scss index d3f0e67616..f82cfca5a4 100644 --- a/src/scss/04-patterns/03-interaction/_lightbox-image.scss +++ b/src/scss/04-patterns/03-interaction/_lightbox-image.scss @@ -1,3 +1,6 @@ +@use '../../00-abstract/index' as *; +@use "../../tokens/variables"; + /* Patterns - Interaction - Lightbox Image */ //// /// @group Patterns-Lightbox_Image @@ -26,7 +29,7 @@ &-image:after { // Service Studio Preview & { - -servicestudio-background-color: #{$token-backdrop}; + -servicestudio-background-color: #{variables.$token-backdrop}; -servicestudio-color: var(--color-text-inverse); -servicestudio-content: 'Image'; -servicestudio-font-size: 9px; @@ -56,7 +59,7 @@ &:after { // Service Studio Preview & { - -servicestudio-background-color: #{$token-backdrop}; + -servicestudio-background-color: #{variables.$token-backdrop}; -servicestudio-color: var(--color-text-inverse); -servicestudio-content: 'Thumbnail'; -servicestudio-font-size: 9px; @@ -126,7 +129,7 @@ .lightbox-item a:focus { background-color: transparent; box-shadow: none; - outline: $token-border-size-075 solid var(--color-focus-outer); + outline: variables.$token-border-size-075 solid var(--color-focus-outer); } } diff --git a/src/scss/04-patterns/03-interaction/_scrollable-area.scss b/src/scss/04-patterns/03-interaction/_scrollable-area.scss index 28f4662dda..e9a909d496 100644 --- a/src/scss/04-patterns/03-interaction/_scrollable-area.scss +++ b/src/scss/04-patterns/03-interaction/_scrollable-area.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Interaction - Scrollable Area */ //// /// @group Patterns-Scrollable_Area @@ -70,12 +72,12 @@ &:hover::-webkit-scrollbar-thumb { background-color: rgba(173, 181, 189, 0.5); - border-radius: $token-scale-150; + border-radius: variables.$token-scale-150; } &::-webkit-scrollbar-thumb:hover { background-color: rgba(106, 113, 120, 0.5); - border-radius: $token-scale-150; + border-radius: variables.$token-scale-150; } } } @@ -96,12 +98,12 @@ &:hover::-webkit-scrollbar-thumb { background-color: rgba(173, 181, 189, 0.5); - border-radius: $token-scale-150; + border-radius: variables.$token-scale-150; } &::-webkit-scrollbar-thumb:hover { background-color: rgba(106, 113, 120, 0.5); - border-radius: $token-scale-150; + border-radius: variables.$token-scale-150; } } @@ -112,7 +114,7 @@ & > :not(:first-child), .list > :not(:first-child) { margin-left: unset; - margin-right: $token-scale-400; + margin-right: variables.$token-scale-400; } } } diff --git a/src/scss/04-patterns/03-interaction/_stacked-cards.scss b/src/scss/04-patterns/03-interaction/_stacked-cards.scss index df56a1a7b9..578cec6645 100644 --- a/src/scss/04-patterns/03-interaction/_stacked-cards.scss +++ b/src/scss/04-patterns/03-interaction/_stacked-cards.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Interaction - Stacked Cards */ //// /// @group Patterns-StackedCards @@ -21,7 +23,7 @@ .stackedcards-container { .OSAutoMarginTop { - margin-top: $token-scale-0; + margin-top: variables.$token-scale-0; } .list.list-group { @@ -57,7 +59,7 @@ &:not([data-animation-disabled]):after { // Service Studio Preview & { - -servicestudio-background-color: $token-bg-surface-default; + -servicestudio-background-color: variables.$token-bg-surface-default; -servicestudio-background-position: center; -servicestudio-background-repeat: no-repeat; -servicestudio-background-size: 291px 225px; @@ -117,7 +119,7 @@ &--animatable { transition: transform, - opacity var(--osui-motion-duration-400) $token-transition-curve-expressive; + opacity var(--osui-motion-duration-400) variables.$token-transition-curve-expressive; } .init { diff --git a/src/scss/04-patterns/03-interaction/animated-label/_animated-label.scss b/src/scss/04-patterns/03-interaction/animated-label/_animated-label.scss index 1976e92e8c..54c28ee147 100644 --- a/src/scss/04-patterns/03-interaction/animated-label/_animated-label.scss +++ b/src/scss/04-patterns/03-interaction/animated-label/_animated-label.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/variables"; + /* Patterns - Interaction - Animated Label */ //// /// @group Patterns-Animated_Label @@ -10,8 +12,8 @@ --osui-animated-label-border-color: var(--color-border-input); --osui-animated-label-hover-border-color: var(--color-border-input-hover); --osui-animated-label-focus-border-color: var(--color-border-primary); - --osui-animated-label-focus-ring-color: #{$token-border-focus-default}; - --osui-animated-label-focus-shadow: 0 0 0 #{$token-border-size-050} var(--osui-animated-label-focus-ring-color); + --osui-animated-label-focus-ring-color: #{variables.$token-border-focus-default}; + --osui-animated-label-focus-shadow: 0 0 0 #{variables.$token-border-size-050} var(--osui-animated-label-focus-ring-color); --osui-animated-label-error-color: var(--color-text-danger); --osui-animated-label-disabled-background: var(--color-background-input-disabled); --osui-animated-label-disabled-color: var(--color-text-disabled); @@ -21,15 +23,15 @@ &.active { .animated-label-text { - font-size: $token-font-size-300; + font-size: variables.$token-font-size-300; top: 0; transform: translateY(-50%); label { color: var(--osui-animated-label-color); - font-size: $token-font-size-300; - font-weight: $token-font-weight-semi-bold; - letter-spacing: $token-font-letter-spacing-0; + font-size: variables.$token-font-size-300; + font-weight: variables.$token-font-weight-semi-bold; + letter-spacing: variables.$token-font-letter-spacing-0; } } @@ -39,7 +41,7 @@ } [data-textarea] { - padding-bottom: $token-scale-100; + padding-bottom: variables.$token-scale-100; } } } @@ -47,28 +49,28 @@ &-text { background-color: var(--osui-input-background, var(--color-background-input)); color: var(--osui-animated-label-color); - font-size: $token-font-size-350; - left: $token-scale-300; - padding: 0 $token-scale-100; + font-size: variables.$token-font-size-350; + left: variables.$token-scale-300; + padding: 0 variables.$token-scale-100; pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); transition: - top $token-transition-time-200 $token-transition-curve-expressive, - font-size $token-transition-time-200 $token-transition-curve-expressive, - color $token-transition-time-100 $token-transition-curve-expressive, - transform $token-transition-time-200 $token-transition-curve-expressive; + top variables.$token-transition-time-200 variables.$token-transition-curve-expressive, + font-size variables.$token-transition-time-200 variables.$token-transition-curve-expressive, + color variables.$token-transition-time-100 variables.$token-transition-curve-expressive, + transform variables.$token-transition-time-200 variables.$token-transition-curve-expressive; z-index: var(--layer-screen); label { color: var(--osui-animated-label-color); - font-size: $token-font-size-350; - font-weight: $token-font-weight-regular; + font-size: variables.$token-font-size-350; + font-weight: variables.$token-font-weight-regular; } .icon { - padding-right: $token-scale-400; + padding-right: variables.$token-scale-400; } // Service Studio Preview @@ -87,14 +89,14 @@ &[data-input], &[data-textarea] { background-color: transparent; - border: $token-border-size-0; - border-bottom: $token-border-size-025 solid var(--osui-animated-label-border-color); - border-radius: $token-border-radius-0; - padding: $token-scale-0; - transition: all $token-transition-time-100 $token-transition-curve-expressive; + border: variables.$token-border-size-0; + border-bottom: variables.$token-border-size-025 solid var(--osui-animated-label-border-color); + border-radius: variables.$token-border-radius-0; + padding: variables.$token-scale-0; + transition: all variables.$token-transition-time-100 variables.$token-transition-curve-expressive; &:focus { - border-bottom: $token-border-size-025 solid var(--osui-animated-label-focus-border-color); + border-bottom: variables.$token-border-size-025 solid var(--osui-animated-label-focus-border-color); &::-webkit-datetime-edit { color: var(--color-text); @@ -102,11 +104,11 @@ } &.not-valid { - border-bottom: $token-border-size-025 solid $token-semantics-danger-base; + border-bottom: variables.$token-border-size-025 solid variables.$token-semantics-danger-base; &:focus { - border: $token-border-size-0; - border-bottom: $token-border-size-025 solid $token-semantics-danger-base; + border: variables.$token-border-size-0; + border-bottom: variables.$token-border-size-025 solid variables.$token-semantics-danger-base; } } @@ -129,7 +131,7 @@ } &[data-textarea] { - margin-top: $token-scale-200; + margin-top: variables.$token-scale-200; & + span.validation-message { bottom: 7px; @@ -142,14 +144,14 @@ Outlined variant ============================================================ */ background-color: var(--osui-input-background, var(--color-background-input)); - border: $token-border-size-025 solid var(--osui-animated-label-border-color); - border-radius: var(--osui-input-border-radius, #{$token-border-radius-200}); + border: variables.$token-border-size-025 solid var(--osui-animated-label-border-color); + border-radius: var(--osui-input-border-radius, #{variables.$token-border-radius-200}); overflow: visible; - transition: border-color $token-transition-time-100 $token-transition-curve-expressive; + transition: border-color variables.$token-transition-time-100 variables.$token-transition-curve-expressive; &:has(.input-with-icon-content-icon:not(:empty)) { .animated-label-text { - left: $token-scale-1000; + left: variables.$token-scale-1000; } } @@ -179,12 +181,12 @@ &:has(.not-valid) { border-color: var(--osui-animated-label-error-color); - margin-bottom: $token-scale-900; + margin-bottom: variables.$token-scale-900; } &:has(textarea) { .animated-label-text { - top: $token-scale-400; + top: variables.$token-scale-400; transform: none; } } @@ -205,7 +207,7 @@ } &:not(:has(textarea)) { - height: $token-scale-1000; + height: variables.$token-scale-1000; span.input-text { height: 100%; @@ -218,7 +220,7 @@ border: none; border-radius: 0; height: 100%; - padding: 0 $token-scale-400; + padding: 0 variables.$token-scale-400; width: 100%; &:focus { @@ -233,7 +235,7 @@ border: none; border-radius: 0; margin: 0; - padding: $token-scale-400 $token-scale-400 0; + padding: variables.$token-scale-400 variables.$token-scale-400 0; width: 100%; &:focus { @@ -248,22 +250,22 @@ bottom: auto; left: 0; position: absolute; - top: calc(100% + #{$token-scale-100}); + top: calc(100% + #{variables.$token-scale-100}); } .input-with-icon { - height: $token-scale-1000; + height: variables.$token-scale-1000; .input-with-icon-content-icon:not(:empty) + .input-with-icon-input .form-control[data-input] { - padding-left: $token-scale-1000; + padding-left: variables.$token-scale-1000; } &.input-with-icon-right .input-with-icon-content-icon:not(:empty) + .input-with-icon-input .form-control[data-input] { - padding-left: $token-scale-400; - padding-right: $token-scale-1000; + padding-left: variables.$token-scale-400; + padding-right: variables.$token-scale-1000; } } } @@ -271,7 +273,7 @@ /* Fix for animated labels inside lists */ .list.list-group > [data-block*='AnimatedLabel']:first-child .animated-label { - margin-top: $token-scale-200; + margin-top: variables.$token-scale-200; } /// @@ -279,7 +281,7 @@ .animated-label { &-input .form-control[data-textarea] + span.validation-message { position: relative; - bottom: $token-scale-600; + bottom: variables.$token-scale-600; } } } @@ -312,7 +314,7 @@ .form-control { &[data-textarea] { & + span.validation-message { - bottom: $token-scale-250; + bottom: variables.$token-scale-250; } } } @@ -332,7 +334,7 @@ } .animated-label:focus-within { - --osui-animated-label-focus-shadow: 0 0 0 #{$token-border-size-075} var(--color-focus-outer); + --osui-animated-label-focus-shadow: 0 0 0 #{variables.$token-border-size-075} var(--color-focus-outer); border-color: var(--osui-animated-label-border-color); } @@ -342,15 +344,15 @@ /// .os-high-contrast { .animated-label-text { - font-weight: $token-font-weight-semi-bold; - padding: $token-scale-0 $token-scale-200; + font-weight: variables.$token-font-weight-semi-bold; + padding: variables.$token-scale-0 variables.$token-scale-200; } .animated-label { &.active { .animated-label-text { background-color: var(--color-text-subtlest); - font-size: $token-font-size-350; + font-size: variables.$token-font-size-350; top: -16px; // design-spec: high-contrast label lift } } @@ -358,7 +360,7 @@ .animated-label-input { .form-control[data-input] { - padding: $token-scale-0 $token-scale-200; + padding: variables.$token-scale-0 variables.$token-scale-200; } } } diff --git a/src/scss/04-patterns/03-interaction/balloon/_balloon.scss b/src/scss/04-patterns/03-interaction/balloon/_balloon.scss index 70a9027f4e..528fb31c8c 100644 --- a/src/scss/04-patterns/03-interaction/balloon/_balloon.scss +++ b/src/scss/04-patterns/03-interaction/balloon/_balloon.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/variables"; + /* Patterns - Interaction - Balloon */ //// /// @group Patterns-Balloon @@ -11,7 +13,7 @@ --border-radius-rounded: var(--border-radius-softer); --osui-floating-position-x: 0; --osui-floating-position-y: 0; - --osui-balloon-shadow: #{$token-elevation-1}; + --osui-balloon-shadow: #{variables.$token-elevation-1}; --osui-balloon-width: max-content; --osui-balloon-position: fixed; @@ -32,7 +34,7 @@ visibility: visible; opacity: 1; pointer-events: all; - transition: opacity $token-transition-time-300 $token-transition-curve-quick; + transition: opacity variables.$token-transition-time-300 variables.$token-transition-curve-quick; } // Prevent the pattern from occupying space when closed, without interfering with its own open animation diff --git a/src/scss/04-patterns/03-interaction/button-loading/_button-loading.scss b/src/scss/04-patterns/03-interaction/button-loading/_button-loading.scss index 573fce5b13..a35ffdb98b 100644 --- a/src/scss/04-patterns/03-interaction/button-loading/_button-loading.scss +++ b/src/scss/04-patterns/03-interaction/button-loading/_button-loading.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/variables"; + /* Patterns - Utilities - Button Loading */ //// /// @group Patterns-Button_Loading @@ -16,7 +18,7 @@ font-size: 0; .osui-btn-loading__spinner-animation { - margin-right: $token-scale-0; + margin-right: variables.$token-scale-0; } & > span[data-expression] { @@ -51,24 +53,24 @@ & > * { display: inline-block; - font-size: $token-font-size-350; + font-size: variables.$token-font-size-350; vertical-align: middle; } .osui-btn-loading__spinner-animation { display: none; - animation: loadingSpinner $token-transition-time-1000 cubic-bezier(0.7, 1.05, 0.78, 0.78) infinite; - border: $token-border-size-050 solid currentColor; + animation: loadingSpinner variables.$token-transition-time-1000 cubic-bezier(0.7, 1.05, 0.78, 0.78) infinite; + border: variables.$token-border-size-050 solid currentColor; border-radius: var(--border-radius-rounded); border-top-color: transparent; - height: $token-scale-400; - margin-right: $token-scale-200; - width: $token-scale-400; + height: variables.$token-scale-400; + margin-right: variables.$token-scale-200; + width: variables.$token-scale-400; will-change: transform; // ServiceStudio Preview & { - -servicestudio-margin-right: $token-scale-200; + -servicestudio-margin-right: variables.$token-scale-200; } } @@ -86,7 +88,7 @@ &.osui-btn-loading--is-loading { .btn { .osui-btn-loading__spinner-animation { - margin-left: $token-scale-0; + margin-left: variables.$token-scale-0; } } } @@ -95,8 +97,8 @@ &--is-loading { .btn { .osui-btn-loading__spinner-animation { - margin-left: $token-scale-200; - margin-right: $token-scale-0; + margin-left: variables.$token-scale-200; + margin-right: variables.$token-scale-0; } } } @@ -117,7 +119,7 @@ .osui-btn-loading { .btn { .osui-btn-loading__spinner-animation { - border-width: $token-border-size-075; + border-width: variables.$token-border-size-075; border-bottom: none; border-top: none; } diff --git a/src/scss/04-patterns/03-interaction/date-picker/_datepicker.scss b/src/scss/04-patterns/03-interaction/date-picker/_datepicker.scss index af6280ce23..bb60a74fdc 100644 --- a/src/scss/04-patterns/03-interaction/date-picker/_datepicker.scss +++ b/src/scss/04-patterns/03-interaction/date-picker/_datepicker.scss @@ -4,7 +4,8 @@ /// Patterns - Interaction - DatePicker /// Import Flatpickr library styles -@import 'provider/flatpickr'; +@use 'provider/flatpickr'; +@use "../../../tokens/variables"; /// .osui-datepicker { @@ -31,7 +32,7 @@ // Disable states for Datepicker &.flatpickr-input[disabled] + input { background-color: var(--osui-datepicker-disabled-background); - border: $token-border-size-025 solid var(--osui-datepicker-disabled-border-color); + border: variables.$token-border-size-025 solid var(--osui-datepicker-disabled-border-color); color: var(--osui-datepicker-disabled-color); pointer-events: none; } @@ -54,9 +55,9 @@ // Service Studio Preview & { - -servicestudio-background-color: $token-bg-surface-default; - -servicestudio-border-radius: $token-border-radius-100; - -servicestudio-border: $token-border-size-025 solid var(--color-border-input); + -servicestudio-background-color: variables.$token-bg-surface-default; + -servicestudio-border-radius: variables.$token-border-radius-100; + -servicestudio-border: variables.$token-border-size-025 solid var(--color-border-input); -servicestudio-display: inline-block; -servicestudio-margin-top: 2px; -servicestudio-max-width: 320px; @@ -67,7 +68,7 @@ &:before, &:after { - -servicestudio-color: $token-semantics-primary-base; + -servicestudio-color: variables.$token-semantics-primary-base; -servicestudio-font-family: var(--osui-icon-font-family); -servicestudio-font-size: clamp(10px, 1.7vw, 20px); -servicestudio-position: absolute; @@ -99,20 +100,20 @@ -servicestudio-text-align: center; -servicestudio-display: block; -servicestudio-font-size: clamp(10px, 1.7vw, 14px); - -servicestudio-margin-bottom: $token-scale-200; + -servicestudio-margin-bottom: variables.$token-scale-200; -servicestudio-position: relative; } } &.time12h .osui-datepicker-calendar-ss-preview--time::before { - -servicestudio-background-color: $token-semantics-primary-base; - -servicestudio-border-radius: $token-border-radius-100; - -servicestudio-color: $token-primitives-base-white; + -servicestudio-background-color: variables.$token-semantics-primary-base; + -servicestudio-border-radius: variables.$token-border-radius-100; + -servicestudio-color: variables.$token-primitives-base-white; -servicestudio-content: 'am'; -servicestudio-font-size: clamp(10px, 1.7vw, 14px); - -servicestudio-font-weight: $token-font-weight-semi-bold; - -servicestudio-height: $token-scale-400; - -servicestudio-line-height: $token-scale-400; + -servicestudio-font-weight: variables.$token-font-weight-semi-bold; + -servicestudio-height: variables.$token-scale-400; + -servicestudio-line-height: variables.$token-scale-400; -servicestudio-position: absolute; -servicestudio-right: 2%; -servicestudio-top: 50%; @@ -141,7 +142,7 @@ .not-valid + .input, .not-valid + .flatpickr-mobile { - border-color: $token-semantics-danger-base; + border-color: variables.$token-semantics-danger-base; } .flatpickr-mobile ~ span.validation-message { diff --git a/src/scss/04-patterns/03-interaction/date-picker/provider/_flatpickr.scss b/src/scss/04-patterns/03-interaction/date-picker/provider/_flatpickr.scss index bb00d58695..f9061be7f6 100644 --- a/src/scss/04-patterns/03-interaction/date-picker/provider/_flatpickr.scss +++ b/src/scss/04-patterns/03-interaction/date-picker/provider/_flatpickr.scss @@ -1,3 +1,5 @@ +@use "../../../../tokens/variables"; + /* Overriding styles for Flatpickr library. Shared between SingleDatePicker, RangeDatePicker and TimePicker @@ -6,8 +8,8 @@ .flatpickr-calendar { --osui-flatpickr-layer: var(--layer-elevated); - border: $token-border-size-025 solid var(--color-border); - border-radius: $token-border-radius-200; + border: variables.$token-border-size-025 solid var(--color-border); + border-radius: variables.$token-border-radius-200; box-shadow: var(--osui-elevation-overlay); width: 320px; @@ -49,10 +51,10 @@ // Has Time &.hasTime { .flatpickr-time { - border: $token-border-size-0; + border: variables.$token-border-size-0; height: 30px; overflow: visible; - padding: $token-scale-0 $token-scale-400 $token-scale-400; + padding: variables.$token-scale-0 variables.$token-scale-400 variables.$token-scale-400; } } @@ -63,10 +65,10 @@ .flatpickr-weekwrapper .flatpickr-weeks { background: var(--color-border-subtle); box-shadow: none; - margin-right: $token-scale-100; + margin-right: variables.$token-scale-100; .flatpickr-day { - color: $token-primitives-neutral-500; + color: variables.$token-primitives-neutral-500; } } @@ -101,8 +103,8 @@ align-items: center; display: grid; grid-template-areas: 'date prev next'; - grid-template-columns: 1fr $token-scale-1000 $token-scale-1000; - padding: $token-scale-200 $token-scale-400; + grid-template-columns: 1fr variables.$token-scale-1000 variables.$token-scale-1000; + padding: variables.$token-scale-200 variables.$token-scale-400; position: relative; .flatpickr-month { @@ -122,30 +124,30 @@ display: flex; justify-content: center; justify-self: flex-end; - height: $token-scale-1000; + height: variables.$token-scale-1000; padding: 0; position: static; top: unset; - width: $token-scale-1000; + width: variables.$token-scale-1000; z-index: calc(var(--osui-flatpickr-layer) + var(--layer-local-tier-1)); &:hover { - background-color: $token-bg-neutral-subtle-default; + background-color: variables.$token-bg-neutral-subtle-default; border-radius: 50%; } // Icon-font glyph (icon library replaces the inline svg with a :before) &:before { - font-size: $token-scale-400; + font-size: variables.$token-scale-400; } svg { - height: $token-scale-400; - width: $token-scale-400; + height: variables.$token-scale-400; + width: variables.$token-scale-400; path { stroke-width: 1px; - stroke: $token-semantics-primary-base; + stroke: variables.$token-semantics-primary-base; } } } @@ -166,9 +168,9 @@ align-items: center; color: var(--color-text); display: inline-flex; - font-size: $token-font-size-350; + font-size: variables.$token-font-size-350; // Keeps the year and month hover/focus surfaces from touching each other - gap: $token-scale-200; + gap: variables.$token-scale-200; justify-content: flex-start; left: unset; padding: 0; @@ -180,17 +182,17 @@ // Month Select .flatpickr-monthDropdown-months { appearance: none; - border-radius: $token-border-radius-100; - font-weight: $token-font-weight-medium; - height: $token-scale-1000; + border-radius: variables.$token-border-radius-100; + font-weight: variables.$token-font-weight-medium; + height: variables.$token-scale-1000; line-height: normal; margin: 0; order: 2; - padding: $token-scale-0 $token-scale-200; + padding: variables.$token-scale-0 variables.$token-scale-200; &:hover, &:focus { - background-color: $token-bg-neutral-subtle-default; + background-color: variables.$token-bg-neutral-subtle-default; } } @@ -207,15 +209,15 @@ } input { - border: $token-border-size-025 solid transparent; - border-radius: $token-border-radius-100; - font-size: $token-font-size-350; - font-weight: $token-font-weight-medium; - height: $token-scale-1000; - padding: $token-scale-0 $token-scale-200; + border: variables.$token-border-size-025 solid transparent; + border-radius: variables.$token-border-radius-100; + font-size: variables.$token-font-size-350; + font-weight: variables.$token-font-weight-medium; + height: variables.$token-scale-1000; + padding: variables.$token-scale-0 variables.$token-scale-200; &:hover { - background-color: $token-bg-neutral-subtle-default; + background-color: variables.$token-bg-neutral-subtle-default; } } } @@ -223,7 +225,7 @@ // Flatpickr - Days container .flatpickr-innerContainer { - padding: 0 $token-scale-400 $token-scale-400; + padding: 0 variables.$token-scale-400 variables.$token-scale-400; } .flatpickr-rContainer, @@ -239,7 +241,7 @@ // Flatpickr - WeekDays .flatpickr-weekdays { - height: $token-scale-1000; + height: variables.$token-scale-1000; } .flatpickr-weekwrapper { .flatpickr-weekday { @@ -249,17 +251,17 @@ // Flatpickr - WeekDay Element span.flatpickr-weekday { - color: var(--color-text-subtle); - font-size: $token-font-size-350; - font-weight: $token-font-weight-regular; + color: var(--color-text-subtlest); + font-size: variables.$token-font-size-350; + font-weight: variables.$token-font-weight-regular; user-select: none; } // Flatpickr - DayElem .flatpickr-day { color: var(--color-text); - font-size: $token-font-size-350; - font-weight: $token-font-weight-regular; + font-size: variables.$token-font-size-350; + font-weight: variables.$token-font-weight-regular; user-select: none; line-height: 37px; @@ -269,7 +271,7 @@ span.flatpickr-weekday { &:hover, &:focus { - color: $token-primitives-neutral-700; + color: variables.$token-primitives-neutral-700; } } @@ -284,13 +286,13 @@ span.flatpickr-weekday { &.today { border-color: var(--color-border); - border-radius: $token-border-radius-100; + border-radius: variables.$token-border-radius-100; &:hover, &:focus { - background: $token-bg-neutral-subtle-default; - border-color: var(--color-border); - color: var(--color-text); + background: var(--color-border-subtle); + border-color: var(--osui-border-subtle); + color: variables.$token-semantics-primary-base; } &.inRange { @@ -300,18 +302,18 @@ span.flatpickr-weekday { &:hover, &:focus { - background: $token-bg-neutral-subtle-default; + background: variables.$token-bg-neutral-subtle-default; border-color: transparent; - border-radius: $token-border-radius-100; + border-radius: variables.$token-border-radius-100; } &.prevMonthDay:hover, &.prevMonthDay:focus, &.nextMonthDay:hover, &.nextMonthDay:focus { - background: $token-bg-neutral-subtle-default; + background: variables.$token-bg-neutral-subtle-default; border-color: transparent; - border-radius: $token-border-radius-100; + border-radius: variables.$token-border-radius-100; } &.inRange, @@ -321,9 +323,9 @@ span.flatpickr-weekday { &.nextMonthDay.inRange, &.nextMonthDay.today.inRange { // Flat neutral band for the connecting in-range cells - background: $token-bg-neutral-subtle-default; - border-color: $token-bg-neutral-subtle-default; - border-radius: $token-border-radius-0; + background: variables.$token-bg-neutral-subtle-default; + border-color: variables.$token-bg-neutral-subtle-default; + border-radius: variables.$token-border-radius-0; } &.selected, @@ -344,9 +346,9 @@ span.flatpickr-weekday { &.endRange.inRange, &.endRange.prevMonthDay, &.endRange.nextMonthDay { - background: $token-semantics-primary-base; - border-color: $token-semantics-primary-base; - border-radius: $token-border-radius-100; + background: variables.$token-semantics-primary-base; + border-color: variables.$token-semantics-primary-base; + border-radius: variables.$token-border-radius-100; &.today { color: var(--color-text-inverse); @@ -365,7 +367,7 @@ span.flatpickr-weekday { display: block; top: -1px; bottom: -1px; - background-color: $token-bg-neutral-subtle-default; + background-color: variables.$token-bg-neutral-subtle-default; position: absolute; z-index: var(--layer-global-negative); } @@ -375,19 +377,19 @@ span.flatpickr-weekday { &.startRange.endRange, &.selected.endRange.startRange, &.endRange.startRange { - border-radius: $token-border-radius-100; + border-radius: variables.$token-border-radius-100; &:before { - border-radius: $token-border-radius-100; + border-radius: variables.$token-border-radius-100; } } &.selected.startRange, &.startRange.startRange { - border-radius: $token-border-radius-100; + border-radius: variables.$token-border-radius-100; &:before { - border-radius: $token-border-radius-100 0 0 $token-border-radius-100; + border-radius: variables.$token-border-radius-100 0 0 variables.$token-border-radius-100; left: 0; right: -2px; } @@ -395,10 +397,10 @@ span.flatpickr-weekday { &.selected.endRange, &.endRange.endRange { - border-radius: $token-border-radius-100; + border-radius: variables.$token-border-radius-100; &:before { - border-radius: 0 $token-border-radius-100 $token-border-radius-100 0; + border-radius: 0 variables.$token-border-radius-100 variables.$token-border-radius-100 0; right: 0; left: -2px; } @@ -444,11 +446,11 @@ span.flatpickr-weekday { &:hover, &:focus { - border-radius: $token-border-radius-100; + border-radius: variables.$token-border-radius-100; } .numInput { - font-size: $token-font-size-350; + font-size: variables.$token-font-size-350; } } @@ -460,51 +462,51 @@ span.flatpickr-weekday { // AM/PM selector .flatpickr-am-pm { - background-color: $token-semantics-primary-base; - border-radius: $token-border-radius-100; + background-color: variables.$token-semantics-primary-base; + border-radius: variables.$token-border-radius-100; color: var(--color-text-inverse); - font-size: $token-font-size-300; - font-weight: $token-font-weight-semi-bold; + font-size: variables.$token-font-size-300; + font-weight: variables.$token-font-weight-semi-bold; height: 18px; line-height: 16px; position: absolute; - right: $token-scale-800; + right: variables.$token-scale-800; text-transform: lowercase; - width: $token-scale-1000; + width: variables.$token-scale-1000; &:hover, &:focus { - background-color: $token-bg-neutral-subtle-default; + background-color: variables.$token-bg-neutral-subtle-default; } } } .firefox .flatpickr-time { input { - max-width: $token-scale-1200; // fix for different input appearance css rules regarding size + max-width: variables.$token-scale-1200; // fix for different input appearance css rules regarding size } } // Flatpickr - TodayBtn .flatpickr-today-button { - padding: $token-scale-0 $token-scale-400 $token-scale-400; + padding: variables.$token-scale-0 variables.$token-scale-400 variables.$token-scale-400; user-select: none; a { align-items: center; - border: $token-border-size-025 solid var(--color-border); + border: variables.$token-border-size-025 solid var(--color-border); border-radius: var(--border-radius-rounded); - color: $token-semantics-primary-base; + color: variables.$token-semantics-primary-base; cursor: pointer; display: inline-flex; - font-size: $token-font-size-350; - font-weight: $token-font-weight-medium; + font-size: variables.$token-font-size-350; + font-weight: variables.$token-font-weight-medium; justify-content: center; - padding: $token-scale-100 $token-scale-400; + padding: variables.$token-scale-100 variables.$token-scale-400; transition: border-color 100ms ease, background-color 100ms ease; &:hover { - background-color: $token-bg-neutral-subtle-default; + background-color: variables.$token-bg-neutral-subtle-default; border-color: var(--color-border); text-decoration: none; } @@ -523,7 +525,7 @@ span.flatpickr-weekday { .flatpickr-current-month .numInputWrapper .numInput, .flatpickr-time .numInputWrapper .numInput { // Hack to disable zoom focus on mobile - font-size: $token-font-size-400; + font-size: variables.$token-font-size-400; } // Hack to force alignment left on iOS 15+ @@ -573,8 +575,8 @@ span.flatpickr-weekday { .flatpickr-current-month { .flatpickr-monthDropdown-months { - margin-left: $token-scale-400; - margin-right: $token-scale-0; + margin-left: variables.$token-scale-400; + margin-right: variables.$token-scale-0; } } @@ -631,7 +633,7 @@ span.flatpickr-weekday { grid-gap: 2px; max-width: 307.875px; min-width: 307.875px; - padding: 0 $token-scale-100; + padding: 0 variables.$token-scale-100; width: initial; } @@ -654,12 +656,12 @@ span.flatpickr-weekday { .flatpickr-prev-month, .flatpickr-next-month { position: absolute; - margin: $token-scale-100; + margin: variables.$token-scale-100; } } .flatpickr-innerContainer { - padding: 0 0 $token-scale-100 0; + padding: 0 0 variables.$token-scale-100 0; } .flatpickr-current-month { @@ -681,16 +683,16 @@ span.flatpickr-weekday { // to the body, detached from the pattern root. --osui-datepicker-time-background: var(--osui-input-background, var(--color-background-input)); --osui-datepicker-time-border-color: var(--osui-input-border-color, var(--color-border)); - --osui-datepicker-time-border-radius: #{$token-border-radius-100}; + --osui-datepicker-time-border-radius: #{variables.$token-border-radius-100}; --osui-datepicker-time-color: var(--color-text-subtlest); - --osui-datepicker-time-focus-color: #{$token-semantics-primary-base}; - --osui-datepicker-time-height: #{$token-scale-1000}; - --osui-datepicker-time-segment-width: #{$token-scale-1200}; + --osui-datepicker-time-focus-color: #{variables.$token-semantics-primary-base}; + --osui-datepicker-time-height: #{variables.$token-scale-1000}; + --osui-datepicker-time-segment-width: #{variables.$token-scale-1200}; // ─────────────────────────────────────────────────────────────────── // ─── hasWeeks side column ─────────────────────────────────────────── &.hasWeeks .flatpickr-weekwrapper .flatpickr-weeks { - border-radius: $token-border-radius-200; + border-radius: variables.$token-border-radius-200; } &.hasWeeks .flatpickr-weekwrapper .flatpickr-weeks .flatpickr-day { @@ -700,8 +702,8 @@ span.flatpickr-weekday { // ─── Today button ─────────────────────────────────────────────────── .flatpickr-today-button { - border-top: $token-border-size-025 solid var(--color-border); - padding: $token-scale-200 $token-scale-400; + border-top: variables.$token-border-size-025 solid var(--osui-border-subtle); + padding: variables.$token-scale-200 variables.$token-scale-400; a, a:hover, @@ -714,10 +716,10 @@ span.flatpickr-weekday { background: transparent; border: none; border-radius: 0; - color: $token-semantics-primary-base; + color: variables.$token-semantics-primary-base; display: block; - font-size: $token-font-size-350; - font-weight: $token-font-weight-medium; + font-size: variables.$token-font-size-350; + font-weight: variables.$token-font-weight-medium; padding: 0; text-align: center; width: 100%; @@ -738,7 +740,7 @@ span.flatpickr-weekday { border-radius: 0; height: var(--osui-datepicker-time-height); justify-content: flex-end; - margin: 0 $token-scale-400 $token-scale-300; + margin: 0 variables.$token-scale-400 variables.$token-scale-300; padding: 0; width: auto; } @@ -751,8 +753,8 @@ span.flatpickr-weekday { .numInputWrapper:nth-child(3) { align-items: center; background: var(--osui-datepicker-time-background); - border-bottom: $token-border-size-025 solid var(--osui-datepicker-time-border-color); - border-top: $token-border-size-025 solid var(--osui-datepicker-time-border-color); + border-bottom: variables.$token-border-size-025 solid var(--osui-datepicker-time-border-color); + border-top: variables.$token-border-size-025 solid var(--osui-datepicker-time-border-color); display: flex; height: var(--osui-datepicker-time-height); justify-content: center; @@ -760,7 +762,7 @@ span.flatpickr-weekday { // Hour wrapper (first numInputWrapper) — left-rounded input segment .numInputWrapper:first-child { - border-left: $token-border-size-025 solid var(--osui-datepicker-time-border-color); + border-left: variables.$token-border-size-025 solid var(--osui-datepicker-time-border-color); border-radius: var(--osui-datepicker-time-border-radius) 0 0 var(--osui-datepicker-time-border-radius); padding: 0; width: var(--osui-datepicker-time-segment-width); @@ -772,13 +774,13 @@ span.flatpickr-weekday { border-right: none; border-radius: 0; color: var(--osui-datepicker-time-color); - padding: 0 $token-scale-100; + padding: 0 variables.$token-scale-100; width: auto; } // Minute wrapper (third child) — right-rounded input segment .numInputWrapper:nth-child(3) { - border-right: $token-border-size-025 solid var(--osui-datepicker-time-border-color); + border-right: variables.$token-border-size-025 solid var(--osui-datepicker-time-border-color); border-radius: 0 var(--osui-datepicker-time-border-radius) var(--osui-datepicker-time-border-radius) 0; padding: 0; width: var(--osui-datepicker-time-segment-width); @@ -786,7 +788,7 @@ span.flatpickr-weekday { .numInputWrapper .numInput { color: var(--osui-datepicker-time-color); - font-weight: $token-font-weight-medium; + font-weight: variables.$token-font-weight-medium; height: auto; line-height: 1; @@ -805,17 +807,17 @@ span.flatpickr-weekday { .flatpickr-am-pm { align-items: center; background: var(--osui-datepicker-time-background); - border: $token-border-size-025 solid var(--osui-datepicker-time-border-color); + border: variables.$token-border-size-025 solid var(--osui-datepicker-time-border-color); border-radius: var(--osui-datepicker-time-border-radius); color: var(--osui-datepicker-time-color); display: flex; // flex: none — keeps the fixed width from being shrunk by the flex row flex: none; - font-size: $token-font-size-350; - font-weight: $token-font-weight-medium; + font-size: variables.$token-font-size-350; + font-weight: variables.$token-font-weight-medium; height: var(--osui-datepicker-time-height); justify-content: center; - margin-left: $token-scale-150; + margin-left: variables.$token-scale-150; padding: 0; position: static; text-transform: uppercase; @@ -853,7 +855,7 @@ span.flatpickr-weekday { .flatpickr-am-pm, .flatpickr-today-button a { &:focus-visible { - box-shadow: 0 0 0 $token-border-size-075 var(--color-focus-outer); + box-shadow: 0 0 0 variables.$token-border-size-075 var(--color-focus-outer); } } @@ -868,7 +870,7 @@ body:has(.has-accessible-features) .osui-monthpicker__dropdown { .flatpickr-next-month, .flatpickr-monthSelect-month.selected { &:focus-visible { - box-shadow: 0 0 0 $token-border-size-075 var(--color-focus-outer); + box-shadow: 0 0 0 variables.$token-border-size-075 var(--color-focus-outer); } } } @@ -879,7 +881,7 @@ body:has(.has-accessible-features) .osui-monthpicker__dropdown { .flatpickr-rContainer, .flatpickr-days, .flatpickr-monthSelect-months { - padding: $token-scale-100; + padding: variables.$token-scale-100; } .flatpickr-calendar { @@ -893,7 +895,7 @@ body:has(.has-accessible-features) .osui-monthpicker__dropdown { .flatpickr-current-month { .numInputWrapper input { - padding: $token-scale-0 $token-scale-100; + padding: variables.$token-scale-0 variables.$token-scale-100; } .flatpickr-monthDropdown-months { @@ -901,7 +903,7 @@ body:has(.has-accessible-features) .osui-monthpicker__dropdown { &:focus, &:active { - outline: $token-border-size-075 solid var(--color-focus-outer); + outline: variables.$token-border-size-075 solid var(--color-focus-outer); } } } @@ -911,7 +913,7 @@ body:has(.has-accessible-features) .osui-monthpicker__dropdown { .flatpickr-next-month { &:focus, &:active { - outline: $token-border-size-075 solid var(--color-focus-outer); + outline: variables.$token-border-size-075 solid var(--color-focus-outer); } } } @@ -931,7 +933,7 @@ body:has(.has-accessible-features) .osui-monthpicker__dropdown { } &.today { - border: $token-border-size-025 solid var(--color-focus-outer); + border: variables.$token-border-size-025 solid var(--color-focus-outer); z-index: calc(var(--osui-flatpickr-calendar-elems-layer) + var(--layer-local-tier-1)); } @@ -942,9 +944,9 @@ body:has(.has-accessible-features) .osui-monthpicker__dropdown { &.selected.inRange, &.selected.prevMonthDay, &.selected.nextMonthDay { - border: $token-border-size-025 solid var(--color-focus-outer); - font-size: $token-font-size-400; - font-weight: $token-font-weight-semi-bold; + border: variables.$token-border-size-025 solid var(--color-focus-outer); + font-size: variables.$token-font-size-400; + font-weight: variables.$token-font-weight-semi-bold; } &:hover, @@ -958,9 +960,9 @@ body:has(.has-accessible-features) .osui-monthpicker__dropdown { &.today.inRange:hover, &.today.inRange:focus, &.today.inRange:focus-visible { - font-size: $token-font-size-400; - font-weight: $token-font-weight-semi-bold; - outline: $token-border-size-075 solid var(--color-focus-outer); + font-size: variables.$token-font-size-400; + font-weight: variables.$token-font-weight-semi-bold; + outline: variables.$token-border-size-075 solid var(--color-focus-outer); } &.inRange { @@ -968,9 +970,9 @@ body:has(.has-accessible-features) .osui-monthpicker__dropdown { &:before { border-left: none; - border-radius: $token-border-radius-0; + border-radius: variables.$token-border-radius-0; border-right: none; - border: $token-border-size-025 solid var(--color-focus-outer); + border: variables.$token-border-size-025 solid var(--color-focus-outer); bottom: -1px; content: ''; display: block; @@ -989,7 +991,7 @@ body:has(.has-accessible-features) .osui-monthpicker__dropdown { &.startRange.endRange, &.endRange.endRange { border: none; - border-radius: $token-border-radius-0; + border-radius: variables.$token-border-radius-0; &:before { right: initial; @@ -1001,7 +1003,7 @@ body:has(.has-accessible-features) .osui-monthpicker__dropdown { &:before { border-radius: 50px 0 0 50px; border-right: none; - border: $token-border-size-025 solid var(--color-focus-outer); + border: variables.$token-border-size-025 solid var(--color-focus-outer); left: 0; right: -2px; } @@ -1012,7 +1014,7 @@ body:has(.has-accessible-features) .osui-monthpicker__dropdown { &:before { border-left: none; border-radius: 0 50px 50px 0; - border: $token-border-size-025 solid var(--color-focus-outer); + border: variables.$token-border-size-025 solid var(--color-focus-outer); left: -2px; right: 0; } diff --git a/src/scss/04-patterns/03-interaction/dropdown/_dropdown-search.scss b/src/scss/04-patterns/03-interaction/dropdown/_dropdown-search.scss index 63a94964c3..389e1ce594 100644 --- a/src/scss/04-patterns/03-interaction/dropdown/_dropdown-search.scss +++ b/src/scss/04-patterns/03-interaction/dropdown/_dropdown-search.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/variables"; + /* Patterns - Interaction - DropdownSearch */ //// /// @group Patterns-DropdownSearch @@ -11,10 +13,10 @@ --osui-dropdown-border-color: var(--color-border-input); --osui-dropdown-hover-border-color: var(--color-border-input-hover); --osui-dropdown-focus-border-color: var(--color-border-primary); - --osui-dropdown-focus-ring-color: #{$token-border-focus-default}; + --osui-dropdown-focus-ring-color: #{variables.$token-border-focus-default}; --osui-dropdown-list-background: var(--color-background-surface); - --osui-dropdown-arrow-color: #{$token-icon-subtlest}; - --osui-dropdown-arrow-size: #{$token-scale-400}; + --osui-dropdown-arrow-color: #{variables.$token-icon-subtlest}; + --osui-dropdown-arrow-size: #{variables.$token-scale-400}; // ─────────────────────────────────────────────────────────────────── // If not valid diff --git a/src/scss/04-patterns/03-interaction/dropdown/_dropdown-serverside.scss b/src/scss/04-patterns/03-interaction/dropdown/_dropdown-serverside.scss index 924c87f04d..7d4c1cb11e 100644 --- a/src/scss/04-patterns/03-interaction/dropdown/_dropdown-serverside.scss +++ b/src/scss/04-patterns/03-interaction/dropdown/_dropdown-serverside.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/variables"; + /* Patterns - Interaction - DropdownServerSide */ //// /// @group Patterns-DropdownServerSide @@ -10,8 +12,8 @@ $balloonMobileTopMargin: 5vh; /// .osui-dropdown-serverside { // ─── Component CSS API ───────────────────────────────────────────── - --osui-dropdown-ss-arrow-color: #{$token-icon-subtlest}; - --osui-dropdown-ss-arrow-size: #{$token-scale-400}; + --osui-dropdown-ss-arrow-color: #{variables.$token-icon-subtlest}; + --osui-dropdown-ss-arrow-size: #{variables.$token-scale-400}; --osui-dropdown-ss-background: var(--color-background-input); --osui-dropdown-ss-border-color: var(--color-border-input); --osui-dropdown-ss-border-radius: var(--border-radius-soft); @@ -19,14 +21,14 @@ $balloonMobileTopMargin: 5vh; --osui-dropdown-ss-disabled-background: var(--color-background-input-disabled); --osui-dropdown-ss-disabled-color: var(--color-text-disabled); --osui-dropdown-ss-focus-border-color: var(--color-border-primary); - --osui-dropdown-ss-focus-ring-color: #{$token-border-focus-default}; + --osui-dropdown-ss-focus-ring-color: #{variables.$token-border-focus-default}; --osui-dropdown-ss-hover-border-color: var(--color-border-input-hover); --osui-dropdown-ss-prompt-color: var(--color-text-subtlest); // ─────────────────────────────────────────────────────────────────── --osui-dropdown-ss-balloon-max-height: 300px; --osui-dropdown-min-width: 170px; - --osui-floating-offset: #{$token-scale-100}; + --osui-floating-offset: #{variables.$token-scale-100}; --osui-dropdown-ss-scroll-bar-width: 5px; position: relative; @@ -35,7 +37,7 @@ $balloonMobileTopMargin: 5vh; --osui-balloon-shadow: var(--osui-elevation-overlay); --osui-balloon-shape: var(--border-radius-soft); - border: $token-border-size-025 solid var(--color-border); + border: variables.$token-border-size-025 solid var(--color-border); display: flex; flex-direction: column; flex: 1; @@ -62,7 +64,7 @@ $balloonMobileTopMargin: 5vh; display: flex; flex: 1; height: inherit; - margin-right: $token-scale-400; + margin-right: variables.$token-scale-400; overflow: hidden; &:after { @@ -74,10 +76,10 @@ $balloonMobileTopMargin: 5vh; line-height: 1; pointer-events: none; position: absolute; - right: $token-scale-400; + right: variables.$token-scale-400; top: 50%; transform: translateY(-50%); - transition: transform $token-transition-time-200 $token-transition-curve-expressive; + transition: transform variables.$token-transition-time-200 variables.$token-transition-curve-expressive; width: var(--osui-dropdown-ss-arrow-size); } @@ -98,15 +100,15 @@ $balloonMobileTopMargin: 5vh; align-items: center; background-color: var(--osui-dropdown-ss-background); border-radius: var(--osui-dropdown-ss-border-radius); - border: $token-border-size-025 solid var(--osui-dropdown-ss-border-color); + border: variables.$token-border-size-025 solid var(--osui-dropdown-ss-border-color); color: var(--osui-dropdown-ss-color); cursor: pointer; display: flex; - font-size: $token-font-size-350; - height: $token-scale-1000; - padding: $token-scale-0 $token-scale-400; + font-size: variables.$token-font-size-350; + height: variables.$token-scale-1000; + padding: variables.$token-scale-0 variables.$token-scale-400; position: relative; - transition: border $token-transition-time-300 $token-transition-curve-expressive; + transition: border variables.$token-transition-time-300 variables.$token-transition-curve-expressive; width: 100%; // Hover — border darkens (matches Figma border/input/hover) @@ -118,7 +120,7 @@ $balloonMobileTopMargin: 5vh; &:focus, &:focus-visible { border-color: var(--osui-dropdown-ss-focus-border-color); - box-shadow: 0 0 0 $token-border-size-050 var(--osui-dropdown-ss-focus-ring-color); + box-shadow: 0 0 0 variables.$token-border-size-050 var(--osui-dropdown-ss-focus-ring-color); outline: none; } @@ -139,7 +141,7 @@ $balloonMobileTopMargin: 5vh; // Search Wrapper &-search-wrapper { background-color: var(--osui-dropdown-ss-background); - padding: $token-scale-0; + padding: variables.$token-scale-0; position: relative; display: flex; align-items: center; @@ -154,7 +156,7 @@ $balloonMobileTopMargin: 5vh; color: var(--color-text-disabled); display: flex; height: 100%; - left: $token-scale-400; + left: variables.$token-scale-400; position: absolute; top: 0; } @@ -166,12 +168,12 @@ $balloonMobileTopMargin: 5vh; input, .form-control[data-input] { background-color: transparent; - border-radius: $token-border-size-0; + border-radius: variables.$token-border-size-0; border: none; color: inherit; - font-size: $token-font-size-350; - height: $token-scale-1000; - padding: $token-scale-0 $token-scale-200 $token-scale-0 $token-scale-400; + font-size: variables.$token-font-size-350; + height: variables.$token-scale-1000; + padding: variables.$token-scale-0 variables.$token-scale-200 variables.$token-scale-0 variables.$token-scale-400; width: 100%; &:focus, @@ -187,18 +189,18 @@ $balloonMobileTopMargin: 5vh; align-items: center; display: flex; height: 100%; - padding: $token-scale-0 $token-scale-400; + padding: variables.$token-scale-0 variables.$token-scale-400; } // Options placeholder &-content { - border-top: $token-border-size-025 solid var(--color-border-input); + border-top: variables.$token-border-size-025 solid var(--color-border-input); flex: 1; height: auto; max-height: var(--osui-dropdown-ss-balloon-max-height); overflow-x: hidden; overflow-y: auto; - padding: $token-scale-0; + padding: variables.$token-scale-0; &::-webkit-scrollbar { width: var(--osui-dropdown-ss-scroll-bar-width); @@ -227,8 +229,8 @@ $balloonMobileTopMargin: 5vh; // Footer placeholder &-footer { - border-top: $token-border-size-025 solid var(--color-border-input); - padding: $token-scale-200 $token-scale-400; + border-top: variables.$token-border-size-025 solid var(--color-border-input); + padding: variables.$token-scale-200 variables.$token-scale-400; } } @@ -238,7 +240,7 @@ $balloonMobileTopMargin: 5vh; // "Input" section wrapper - SelectedValues container wrapper &__selected-values-wrapper { border-color: var(--osui-dropdown-ss-focus-border-color); - box-shadow: 0 0 0 $token-border-size-050 var(--osui-dropdown-ss-focus-ring-color); + box-shadow: 0 0 0 variables.$token-border-size-050 var(--osui-dropdown-ss-focus-ring-color); } // "Input" section - SelectedValues container @@ -279,10 +281,10 @@ $balloonMobileTopMargin: 5vh; } & + .osui-dropdown-serverside-error-message { - color: $token-semantics-danger-base; - font-size: $token-font-size-300; - margin-left: $token-scale-0; - margin-top: $token-scale-075; + color: variables.$token-semantics-danger-base; + font-size: variables.$token-font-size-300; + margin-left: variables.$token-scale-0; + margin-top: variables.$token-scale-075; } } @@ -315,7 +317,7 @@ $balloonMobileTopMargin: 5vh; .windows .osui-tabs { // subtracts the size of the border so it doesn't get cut off inside the tabs, in windows .osui-dropdown-serverside__selected-values-wrapper { - width: calc(100% - 2 * $token-border-size-025); + width: calc(100% - 2 * variables.$token-border-size-025); } } @@ -337,8 +339,8 @@ $balloonMobileTopMargin: 5vh; &-search-wrapper { &:focus-within { - outline: $token-border-size-075 solid var(--color-focus-outer); - outline-offset: -$token-border-size-075; + outline: variables.$token-border-size-075 solid var(--color-focus-outer); + outline-offset: -(variables.$token-border-size-075); } } @@ -349,7 +351,7 @@ $balloonMobileTopMargin: 5vh; } &-content { - --osui-outline-size: #{$token-border-size-075}; + --osui-outline-size: #{variables.$token-border-size-075}; &::-webkit-scrollbar-thumb { background-color: var(--color-border-input); @@ -416,7 +418,7 @@ $balloonMobileTopMargin: 5vh; .has-accessible-features .osui-dropdown-serverside__balloon-content:focus { --osui-outline-size: 0; - box-shadow: inset 0 0 0 $token-border-size-075 var(--color-focus-outer); + box-shadow: inset 0 0 0 variables.$token-border-size-075 var(--color-focus-outer); } } @@ -425,11 +427,11 @@ $balloonMobileTopMargin: 5vh; .is-rtl { .osui-dropdown-serverside { &__selected-values { - margin-left: $token-scale-400; + margin-left: variables.$token-scale-400; margin-right: initial; &:after { - left: $token-scale-400; + left: variables.$token-scale-400; right: auto; } } @@ -439,12 +441,12 @@ $balloonMobileTopMargin: 5vh; &-search { &:before { left: auto; - right: $token-scale-400; + right: variables.$token-scale-400; } input, .form-control[data-input] { - padding: $token-scale-0 $token-scale-400 $token-scale-0 $token-scale-200; + padding: variables.$token-scale-0 variables.$token-scale-400 variables.$token-scale-0 variables.$token-scale-200; } } } @@ -457,14 +459,14 @@ $balloonMobileTopMargin: 5vh; .phone { .osui-dropdown-serverside { &__selected-values-wrapper { - height: $token-scale-1200; + height: variables.$token-scale-1200; } &__balloon-search { input, .form-control[data-input] { - font-size: $token-font-size-400; - height: $token-scale-1200; + font-size: variables.$token-font-size-400; + height: variables.$token-scale-1200; } } } @@ -532,7 +534,7 @@ $balloonMobileTopMargin: 5vh; // Balloon section &__balloon { align-items: center; - background-color: $token-backdrop; + background-color: variables.$token-backdrop; border: none; border-radius: var(--border-radius-sharp); display: flex; @@ -541,13 +543,13 @@ $balloonMobileTopMargin: 5vh; opacity: 0; overflow: hidden; top: 0; - transition: opacity $token-transition-time-300 $token-transition-curve-expressive; + transition: opacity variables.$token-transition-time-300 variables.$token-transition-curve-expressive; width: 100vw; z-index: var(--layer-instant-interaction); // Service Studio Preview & { - -servicestudio-background-color: $token-bg-surface-default; + -servicestudio-background-color: variables.$token-bg-surface-default; -servicestudio-left: initial; -servicestudio-opacity: 1; -servicestudio-position: relative; @@ -555,9 +557,9 @@ $balloonMobileTopMargin: 5vh; } &-container { - background: $token-bg-surface-default; + background: variables.$token-bg-surface-default; border-radius: var(--osui-balloon-shape); - box-shadow: $token-elevation-4; + box-shadow: variables.$token-elevation-4; display: flex; flex-direction: column; height: auto; @@ -615,7 +617,7 @@ $balloonMobileTopMargin: 5vh; margin-top: var(--ballon-top-margin-value); position: relative; transform: translateY(calc(0.5 * var(--ballon-top-margin-value))); - transition: all $token-transition-time-300 $token-transition-curve-expressive; + transition: all variables.$token-transition-time-300 variables.$token-transition-curve-expressive; } .osui-dropdown-serverside__balloon-content { @@ -628,7 +630,7 @@ $balloonMobileTopMargin: 5vh; /* Track */ &::-webkit-scrollbar-track { - background-color: $token-bg-neutral-subtle-default; + background-color: variables.$token-bg-neutral-subtle-default; } /* Handle */ diff --git a/src/scss/04-patterns/03-interaction/dropdown/_dropdown-tags.scss b/src/scss/04-patterns/03-interaction/dropdown/_dropdown-tags.scss index ff288a15f7..8d09cbcf9b 100644 --- a/src/scss/04-patterns/03-interaction/dropdown/_dropdown-tags.scss +++ b/src/scss/04-patterns/03-interaction/dropdown/_dropdown-tags.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/variables"; + /* Patterns - Interaction - DropdownTags */ //// /// @group Patterns-DropdownTags @@ -11,11 +13,11 @@ --osui-dropdown-border-color: var(--color-border-input); --osui-dropdown-hover-border-color: var(--color-border-input-hover); --osui-dropdown-focus-border-color: var(--color-border-primary); - --osui-dropdown-focus-ring-color: #{$token-border-focus-default}; + --osui-dropdown-focus-ring-color: #{variables.$token-border-focus-default}; --osui-dropdown-list-background: var(--color-background-surface); - --osui-dropdown-arrow-color: #{$token-icon-subtlest}; - --osui-dropdown-arrow-size: #{$token-scale-400}; - --osui-dropdown-tag-color: #{$token-text-subtlest}; + --osui-dropdown-arrow-color: #{variables.$token-icon-subtlest}; + --osui-dropdown-arrow-size: #{variables.$token-scale-400}; + --osui-dropdown-tag-color: #{variables.$token-text-subtlest}; // ─────────────────────────────────────────────────────────────────── // If not valid diff --git a/src/scss/04-patterns/03-interaction/dropdown/_dropdown.scss b/src/scss/04-patterns/03-interaction/dropdown/_dropdown.scss index 4c85e846e1..43877174c6 100644 --- a/src/scss/04-patterns/03-interaction/dropdown/_dropdown.scss +++ b/src/scss/04-patterns/03-interaction/dropdown/_dropdown.scss @@ -4,44 +4,43 @@ /// Patterns - Interaction - Dropdown // Import common dropdown styles based on Current provider -@import 'provider/virtualselect'; +@use 'provider/virtualselect'; +@use "../../../tokens/variables"; // Common dropdown styles -.osui-dropdown, -.osui-dropdown-search, -.osui-dropdown-tags { +.osui-dropdown { // ─── Component CSS API ───────────────────────────────────────────── --osui-dropdown-disabled-background: var(--color-background-input-disabled); --osui-dropdown-disabled-border-color: var(--color-border-input); --osui-dropdown-disabled-color: var(--color-text-disabled); // ─────────────────────────────────────────────────────────────────── + &-search, + &-tags { + /// Disable states for dropdowns + &.vscomp-ele[disabled] { + // Override of library cursor on disable states + cursor: initial; - /// Disable states for dropdowns - &.vscomp-ele[disabled] { - // Override of library cursor on disable states - cursor: initial; - - .vscomp { - &-toggle-button { - background-color: var(--osui-dropdown-disabled-background); - border: $token-border-size-025 solid var(--osui-dropdown-disabled-border-color); - pointer-events: none; - .vscomp-value { + .vscomp { + &-toggle-button { + background-color: var(--osui-dropdown-disabled-background); + border: variables.$token-border-size-025 solid var(--osui-dropdown-disabled-border-color); color: var(--osui-dropdown-disabled-color); + pointer-events: none; } - } - &-wrapper, - &-wrapper:not(.has-value) .vscomp-value { - opacity: inherit; + &-wrapper, + &-wrapper:not(.has-value) .vscomp-value { + opacity: inherit; + } } } - } - // Override the font-family of provider - .vscomp-wrapper { - font-family: inherit; + // Override the font-family of provider + .vscomp-wrapper { + font-family: inherit; + } } /// Dropdown Option Item image @@ -49,26 +48,26 @@ &-image { border-radius: 100%; display: inline-block; - height: $token-scale-600; - margin-right: $token-scale-200; - width: $token-scale-600; - background-color: $token-bg-neutral-subtle-default; + height: variables.$token-scale-600; + margin-right: variables.$token-scale-200; + width: variables.$token-scale-600; + background-color: variables.$token-bg-neutral-subtle-default; overflow: hidden; } &-icon { color: var(--color-text); - font-size: $token-font-size-450; - margin-right: $token-scale-200; + font-size: variables.$token-font-size-450; + margin-right: variables.$token-scale-200; } } /// Error message &-error-message { - color: $token-semantics-danger-base; - font-size: $token-font-size-300; - margin-left: $token-scale-0; - margin-top: $token-scale-075; + color: variables.$token-semantics-danger-base; + font-size: variables.$token-font-size-300; + margin-left: variables.$token-scale-0; + margin-top: variables.$token-scale-075; } } @@ -77,7 +76,7 @@ .osui-dropdown { &-option-image, &-option-icon { - margin-left: $token-scale-200; + margin-left: variables.$token-scale-200; margin-right: initial; } } diff --git a/src/scss/04-patterns/03-interaction/dropdown/_dropdownserversideitem.scss b/src/scss/04-patterns/03-interaction/dropdown/_dropdownserversideitem.scss index fd54c9fd81..2e49205849 100644 --- a/src/scss/04-patterns/03-interaction/dropdown/_dropdownserversideitem.scss +++ b/src/scss/04-patterns/03-interaction/dropdown/_dropdownserversideitem.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/variables"; + /* Patterns - section - DropdownServerSideItem */ //// /// @group Patterns-DropdownServerSideItem @@ -17,11 +19,11 @@ cursor: pointer; display: flex; flex: 1; - min-height: $token-scale-1000; + min-height: variables.$token-scale-1000; overflow: hidden; - padding: $token-scale-200 $token-scale-400; + padding: variables.$token-scale-200 variables.$token-scale-400; position: relative; - transition: background $token-transition-time-300 $token-transition-curve-expressive; + transition: background variables.$token-transition-time-300 variables.$token-transition-curve-expressive; width: 100%; z-index: var(--layer-screen); @@ -30,7 +32,7 @@ z-index: var(--layer-local-tier-1); // Service Studio Preview - -servicestudio-background-color: $token-bg-surface-default; + -servicestudio-background-color: variables.$token-bg-surface-default; } &--is-selected { @@ -38,16 +40,16 @@ z-index: var(--layer-local-tier-1); // Service Studio Preview - -servicestudio-background-color: $token-bg-surface-default; + -servicestudio-background-color: variables.$token-bg-surface-default; // Right-side checkmark — requires --osui-icon-check + --osui-icon-font-family (icon library) &::after { - color: $token-semantics-primary-base; + color: variables.$token-semantics-primary-base; content: var(--osui-icon-check); flex-shrink: 0; font-family: var(--osui-icon-font-family); - font-size: $token-font-size-400; - margin-left: $token-scale-200; + font-size: variables.$token-font-size-400; + margin-left: variables.$token-scale-200; } } @@ -61,7 +63,7 @@ // Override platform .bold utility class applied to item text .bold { - font-weight: $token-font-weight-regular; + font-weight: variables.$token-font-weight-regular; } & > *:first-child { @@ -78,11 +80,11 @@ .has-accessible-features { .osui-dropdown-serverside-item { &:hover { - background-color: $token-bg-neutral-subtle-press; + background-color: variables.$token-bg-neutral-subtle-press; } &:focus { - box-shadow: inset 0 0 0 $token-border-size-075 var(--color-focus-outer); + box-shadow: inset 0 0 0 variables.$token-border-size-075 var(--color-focus-outer); } } } @@ -96,7 +98,7 @@ outline: none; &:before { - box-shadow: inset 0 0 0 $token-border-size-075 var(--color-focus-outer); + box-shadow: inset 0 0 0 variables.$token-border-size-075 var(--color-focus-outer); bottom: 0; content: ''; display: block; @@ -114,6 +116,6 @@ .tablet, .phone { .osui-dropdown-serverside-item { - height: $token-scale-1200; + height: variables.$token-scale-1200; } } diff --git a/src/scss/04-patterns/03-interaction/dropdown/provider/_virtualselect.scss b/src/scss/04-patterns/03-interaction/dropdown/provider/_virtualselect.scss index 5a01088281..e4f89d9527 100644 --- a/src/scss/04-patterns/03-interaction/dropdown/provider/_virtualselect.scss +++ b/src/scss/04-patterns/03-interaction/dropdown/provider/_virtualselect.scss @@ -1,3 +1,5 @@ +@use "../../../../tokens/variables"; + // Set the transform values to checkBox Checked Icon @mixin CheckBoxCheckIconTransform { transform: rotate(45deg) translate(3px, -3px); @@ -16,8 +18,8 @@ &.pop-comp-active { // The extra `.vscomp-wrapper` is required to outrank the focus elevation reset below .vscomp-wrapper .vscomp-toggle-button { - border-color: var(--osui-dropdown-focus-border-color, #{$token-semantics-primary-base}); - box-shadow: 0 0 0 $token-border-size-050 var(--osui-dropdown-focus-ring-color, #{$token-border-focus-default}); + border-color: var(--osui-dropdown-focus-border-color, #{variables.$token-semantics-primary-base}); + box-shadow: 0 0 0 variables.$token-border-size-050 var(--osui-dropdown-focus-ring-color, #{variables.$token-border-focus-default}); // Arrow keeps its resting colour while open — only the rotation changes &:after { @@ -40,14 +42,14 @@ &-ele .vscomp-clear-icon:after, &-search-clear:after { align-items: center; - color: $token-icon-subtlest; + color: variables.$token-icon-subtlest; display: flex; height: 100%; justify-content: center; position: absolute; text-indent: 0; top: 0; - width: $token-scale-600; + width: variables.$token-scale-600; } &-clear-button:hover { @@ -57,13 +59,14 @@ &::after, &::before { background-color: transparent; + color: variables.$token-primitives-neutral-700; } } } &-search-clear:hover:after { background-color: transparent; - color: $token-primitives-neutral-700; + color: variables.$token-primitives-neutral-700; } } @@ -87,13 +90,13 @@ &.has-value { &.show-value-as-tags { .vscomp-toggle-button { - padding-left: $token-scale-200; + padding-left: variables.$token-scale-200; } } .vscomp-value { color: var(--color-text); - margin-right: $token-scale-600; - margin-left: $token-scale-0; + margin-right: variables.$token-scale-600; + margin-left: variables.$token-scale-0; } } @@ -108,8 +111,8 @@ .vscomp-option { &.selected { .checkbox-icon { - background-color: $token-semantics-primary-base; - border-color: $token-semantics-primary-base; + background-color: variables.$token-semantics-primary-base; + border-color: variables.$token-semantics-primary-base; &:after { border-color: var(--color-text-inverse); @@ -132,28 +135,28 @@ &:not(.multiple) { .vscomp-option.group-title { - height: $token-scale-1000 !important; // !important required to override the element style in html + height: variables.$token-scale-1000 !important; // !important required to override the element style in html } } &.show-value-as-tags { .vscomp-toggle-button { height: auto; - min-height: $token-scale-1000; - padding: 6px $token-scale-1200 2px $token-scale-400; // 6px/2px: design-spec vertical rhythm for tag rows, no exact token + min-height: variables.$token-scale-1000; + padding: 6px variables.$token-scale-1200 2px variables.$token-scale-400; // 6px/2px: design-spec vertical rhythm for tag rows, no exact token } .vscomp-value-tag { align-items: center; - background-color: $token-bg-neutral-subtlest-hover; + background-color: variables.$token-bg-neutral-subtlest-hover; border: none; border-radius: var(--border-radius-rounded); color: var(--color-text-subtlest); display: inline-flex; - font-size: $token-font-size-300; - font-weight: $token-font-weight-medium; - height: $token-scale-700; - padding: 0 $token-space-200 0 $token-space-300; + font-size: variables.$token-font-size-300; + font-weight: variables.$token-font-weight-medium; + height: variables.$token-scale-700; + padding: 0 variables.$token-scale-200 0 variables.$token-scale-300; position: relative; .vscomp-value-tag-content { @@ -163,9 +166,10 @@ .vscomp-value-tag-clear-button { background-color: transparent; border-radius: 0; - color: $token-icon-subtlest; + color: variables.$token-icon-subtlest; height: auto; - margin-left: $token-scale-100; + margin-left: variables.$token-scale-100; + opacity: 0.5; position: relative; right: auto; top: auto; @@ -173,15 +177,15 @@ width: auto; .vscomp-clear-icon { - height: $token-scale-300; - left: $token-scale-0; + height: variables.$token-scale-300; + left: variables.$token-scale-0; position: relative; - top: $token-scale-0; - width: $token-scale-300; + top: variables.$token-scale-0; + width: variables.$token-scale-300; &:before, &:after { - color: $token-icon-subtlest; + color: variables.$token-icon-subtlest; } } @@ -189,7 +193,7 @@ .vscomp-clear-icon { &:before, &:after { - color: $token-icon-default; + color: variables.$token-icon-default; } } } @@ -208,13 +212,13 @@ border: none; &-container { - background-color: $token-backdrop; + background-color: variables.$token-backdrop; // The !important is needed in order to overwrite the inline style added by library! z-index: var(--layer-elevated) !important; } .vscomp-search-container { - height: $token-scale-1200; + height: variables.$token-scale-1200; } .vscomp-search-input { @@ -226,7 +230,7 @@ // RTL Text &.text-direction-rtl { .vscomp-search-container { - padding: $token-space-0 $token-space-400; + padding: variables.$token-scale-0 variables.$token-scale-400; } &.multiple { @@ -243,8 +247,8 @@ &.has-value { .vscomp-value { - margin-left: $token-scale-600; - margin-right: $token-scale-0; + margin-left: variables.$token-scale-600; + margin-right: variables.$token-scale-0; } &, @@ -258,7 +262,7 @@ &.show-value-as-tags { &.has-value { .vscomp-toggle-button { - padding-right: $token-scale-200; + padding-right: variables.$token-scale-200; } } @@ -272,20 +276,22 @@ } .vscomp-toggle-button { - padding: $token-scale-100 $token-scale-400 $token-scale-0 $token-scale-1200; + padding: variables.$token-scale-100 variables.$token-scale-400 variables.$token-scale-0 variables.$token-scale-1200; } } .vscomp-toggle-button { - padding: $token-scale-100 $token-scale-400 $token-scale-100 $token-scale-1000; + padding: variables.$token-scale-100 variables.$token-scale-400 variables.$token-scale-100 variables.$token-scale-1000; &:after { - left: $token-scale-400; + left: variables.$token-scale-400; right: auto; } } .checkbox-icon { + margin-left: variables.$token-scale-200; + &.checked { &:after { @include IsRTL_CheckBoxCheckIconTransform; @@ -297,7 +303,7 @@ &:not(.text-direction-rtl) { &.has-value { .vscomp-clear-button { - right: $token-scale-1000; + right: variables.$token-scale-1000; } } } @@ -305,26 +311,26 @@ // Checkbox .checkbox-icon { background-color: var(--color-background-input); - border-radius: $token-border-radius-100; - border: $token-border-size-025 solid var(--color-border-input); - height: $token-scale-400; + border-radius: variables.$token-border-radius-100; + border: variables.$token-border-size-025 solid var(--color-border-input); + height: variables.$token-scale-400; margin-right: 0px; overflow: visible; - transition: background-color $token-transition-time-300 $token-transition-curve-expressive; - width: $token-scale-400; + transition: background-color variables.$token-transition-time-300 variables.$token-transition-curve-expressive; + width: variables.$token-scale-400; &:after { backface-visibility: hidden; border-color: transparent; height: 85%; opacity: 0; - transition: opacity $token-transition-time-300 $token-transition-curve-expressive; + transition: opacity variables.$token-transition-time-300 variables.$token-transition-curve-expressive; width: 40%; } &.checked { - background-color: $token-semantics-primary-base; - border-color: $token-semantics-primary-base; + background-color: variables.$token-semantics-primary-base; + border-color: variables.$token-semantics-primary-base; &:after { border-color: var(--color-text-inverse); @@ -341,40 +347,40 @@ // Top part - Select to open dropdown .vscomp-toggle-button { - --vscomp-toogle-btn-arrow-size: var(--osui-dropdown-arrow-size, #{$token-scale-400}); - --vscomp-toogle-btn-height: #{$token-scale-1000}; - --vscomp-toogle-btn-mobile-height: #{$token-scale-1200}; + --vscomp-toogle-btn-arrow-size: var(--osui-dropdown-arrow-size, #{variables.$token-scale-400}); + --vscomp-toogle-btn-height: #{variables.$token-scale-1000}; + --vscomp-toogle-btn-mobile-height: #{variables.$token-scale-1200}; background-color: var(--osui-dropdown-background, var(--color-background-input)); - border-radius: var(--osui-dropdown-border-radius, $token-border-radius-200); - border: $token-border-size-025 solid var(--osui-dropdown-border-color, var(--color-border-input)); + border-radius: var(--osui-dropdown-border-radius, variables.$token-border-radius-200); + border: variables.$token-border-size-025 solid var(--osui-dropdown-border-color, var(--color-border-input)); color: var(--color-text); cursor: pointer; display: inline-flex; - font-size: $token-font-size-350; + font-size: variables.$token-font-size-350; height: var(--vscomp-toogle-btn-height); line-height: var(--vscomp-toogle-btn-height); min-width: 180px; - padding: $token-scale-100 $token-scale-1000 $token-scale-100 $token-scale-400; + padding: variables.$token-scale-100 variables.$token-scale-1000 variables.$token-scale-100 variables.$token-scale-400; position: relative; - transition: border-color $token-transition-time-100 $token-transition-curve-base; + transition: border-color variables.$token-transition-time-100 variables.$token-transition-curve-base; vertical-align: middle; width: 100%; // Create new arrow for all dropdown types &:after { align-items: center; - color: var(--osui-dropdown-arrow-color, #{$token-icon-subtlest}); + color: var(--osui-dropdown-arrow-color, #{variables.$token-icon-subtlest}); display: flex; height: var(--vscomp-toogle-btn-arrow-size); justify-content: center; line-height: 1; position: absolute; - right: $token-scale-400; + right: variables.$token-scale-400; top: 50%; transform: translateY(-50%); transform-origin: center; - transition: transform $token-transition-time-100 $token-transition-curve-base; + transition: transform variables.$token-transition-time-100 variables.$token-transition-curve-base; width: var(--vscomp-toogle-btn-arrow-size); } @@ -390,7 +396,7 @@ // Container with the selected value(s) .vscomp-value { color: var(--color-text-subtlest); - font-size: $token-font-size-350; + font-size: variables.$token-font-size-350; } // Default dropdown arrow @@ -421,9 +427,9 @@ } .vscomp-dropbox { - background-color: var(--osui-dropdown-list-background, $token-bg-surface-default); - border: $token-border-size-025 solid var(--color-border); - border-radius: var(--osui-dropdown-border-radius, $token-border-radius-200); + background-color: var(--osui-dropdown-list-background, variables.$token-bg-surface-default); + border: variables.$token-border-size-025 solid var(--color-border); + border-radius: var(--osui-dropdown-border-radius, variables.$token-border-radius-200); box-shadow: var(--osui-elevation-overlay); overflow: hidden; padding: 0; @@ -436,20 +442,20 @@ // Options container input search wrapper .vscomp-search-container { - border-bottom: $token-border-size-025 solid var(--color-border); - padding: $token-scale-0 $token-scale-200 $token-scale-0 $token-scale-400; + border-bottom: variables.$token-border-size-025 solid var(--color-border); + padding: variables.$token-scale-0 variables.$token-scale-200 variables.$token-scale-0 variables.$token-scale-400; position: relative; .vscomp-search-clear { border-radius: 50%; - color: $token-primitives-neutral-700; + color: variables.$token-primitives-neutral-700; display: table; font-size: 0; - font-weight: $token-font-weight-semi-bold; - height: $token-scale-600; + font-weight: variables.$token-font-weight-semi-bold; + height: variables.$token-scale-600; line-height: 1; text-align: center; - width: $token-scale-600; + width: variables.$token-scale-600; /* Hide text from provider div in order to keep consistency on styles */ text-indent: 100%; @@ -470,13 +476,13 @@ // Move "Toggle all" checkbox to the end of the search container .vscomp-toggle-all-button { order: 1; - margin-left: $token-space-200; + margin-left: variables.$token-scale-200; } } // Options container input search .vscomp-search-input { - font-size: $token-font-size-350; + font-size: variables.$token-font-size-350; &::placeholder { color: var(--color-text-subtlest); @@ -506,8 +512,8 @@ align-items: center; color: var(--color-text); display: flex; - font-size: $token-font-size-350; - gap: $token-scale-100; + font-size: variables.$token-font-size-350; + gap: variables.$token-scale-100; min-width: 0; overflow: hidden; } @@ -517,29 +523,29 @@ align-items: center; background-color: var(--color-background-input); flex-wrap: nowrap; - font-weight: $token-font-weight-regular; + font-weight: variables.$token-font-weight-regular; justify-content: space-between; - transition: background-color $token-transition-time-100 $token-transition-curve-base; + transition: background-color variables.$token-transition-time-100 variables.$token-transition-curve-base; &.focused { - background-color: $token-bg-neutral-subtlest-hover; + background-color: variables.$token-bg-neutral-subtlest-hover; } &.selected { background-color: transparent; &.focused { - background-color: $token-bg-neutral-subtlest-hover; + background-color: variables.$token-bg-neutral-subtlest-hover; } // Right-side checkmark — requires --osui-icon-check + --osui-icon-font-family (icon library) &::after { - color: $token-semantics-primary-base; + color: variables.$token-semantics-primary-base; content: var(--osui-icon-check); flex-shrink: 0; font-family: var(--osui-icon-font-family); - font-size: $token-font-size-400; - margin-left: $token-scale-200; + font-size: variables.$token-font-size-400; + margin-left: variables.$token-scale-200; } } @@ -550,9 +556,9 @@ // Style group title in single select dropdown // this selector is necessary so that the style is not applied when the option has a checkbox &:only-child { - color: $token-primitives-neutral-700; - font-size: $token-font-size-275; - font-weight: $token-font-weight-semi-bold; + color: variables.$token-primitives-neutral-700; + font-size: variables.$token-font-size-275; + font-weight: variables.$token-font-weight-semi-bold; text-transform: uppercase; } } @@ -566,15 +572,15 @@ // Option Item description .vscomp-option-description { - color: $token-primitives-neutral-700; - font-size: $token-font-size-275; + color: variables.$token-primitives-neutral-700; + font-size: variables.$token-font-size-275; margin-top: 1px; } // When using the extensibility property allowNewOption .vscomp-new-option-icon { &::before { - border: 15px solid $token-semantics-primary-base; + border: 15px solid variables.$token-semantics-primary-base; border-bottom-color: rgba(0, 0, 0, 0); border-left-color: rgba(0, 0, 0, 0); } @@ -596,12 +602,12 @@ box-shadow: none; .checkbox-icon { - box-shadow: 0 0 0 $token-border-size-075 var(--color-focus-outer); + box-shadow: 0 0 0 variables.$token-border-size-075 var(--color-focus-outer); } } .vscomp-option.focused { - box-shadow: inset 0 0 0 $token-border-size-075 var(--color-focus-outer); + box-shadow: inset 0 0 0 variables.$token-border-size-075 var(--color-focus-outer); } } @@ -611,14 +617,14 @@ .vscomp-wrapper { &.show-value-as-tags { .vscomp-value-tag { - border: $token-border-size-025 solid var(--color-border-input); + border: variables.$token-border-size-025 solid var(--color-border-input); } } .vscomp-option { &.focused { &:before { - border: $token-border-size-050 solid var(--color-border-input); + border: variables.$token-border-size-050 solid var(--color-border-input); bottom: 0; content: ''; display: block; @@ -642,7 +648,7 @@ .pop-comp-content, .vscomp-dropbox-container { - border: $token-border-size-050 solid var(--color-border-input); + border: variables.$token-border-size-050 solid var(--color-border-input); } .vscomp-options-container { @@ -651,11 +657,11 @@ } &::-webkit-scrollbar-track { - border: $token-border-size-075 solid $token-primitives-neutral-400; + border: variables.$token-border-size-075 solid variables.$token-primitives-neutral-400; } &::-webkit-scrollbar-thumb { - border: $token-border-size-025 solid $token-primitives-neutral-400; + border: variables.$token-border-size-025 solid variables.$token-primitives-neutral-400; } } } diff --git a/src/scss/04-patterns/03-interaction/month-picker/_monthpicker.scss b/src/scss/04-patterns/03-interaction/month-picker/_monthpicker.scss index 5350e2d248..ca4a441b8c 100644 --- a/src/scss/04-patterns/03-interaction/month-picker/_monthpicker.scss +++ b/src/scss/04-patterns/03-interaction/month-picker/_monthpicker.scss @@ -4,7 +4,8 @@ /// Patterns - Interaction - MonthPicker /// Import Flatpickr library styles -@import 'provider/flatpickr'; +@use 'provider/flatpickr'; +@use "../../../tokens/variables"; /// .osui-monthpicker { @@ -35,7 +36,7 @@ &:before, &:after { - -servicestudio-color: $token-semantics-primary-base; + -servicestudio-color: variables.$token-semantics-primary-base; -servicestudio-font-family: var(--osui-icon-font-family); -servicestudio-font-size: clamp(10px, 1.7vw, 20px); -servicestudio-position: absolute; @@ -60,14 +61,14 @@ .not-valid + .input, .not-valid + .flatpickr-mobile { - border-color: $token-semantics-danger-base; + border-color: variables.$token-semantics-danger-base; } input { // Disable states for Datepicker &[disabled] + input { background-color: var(--osui-monthpicker-disabled-background); - border: $token-border-size-025 solid var(--osui-monthpicker-disabled-border-color); + border: variables.$token-border-size-025 solid var(--osui-monthpicker-disabled-border-color); color: var(--osui-monthpicker-disabled-color); pointer-events: none; } diff --git a/src/scss/04-patterns/03-interaction/month-picker/provider/_flatpickr.scss b/src/scss/04-patterns/03-interaction/month-picker/provider/_flatpickr.scss index a5cd744053..f570fdd0fc 100644 --- a/src/scss/04-patterns/03-interaction/month-picker/provider/_flatpickr.scss +++ b/src/scss/04-patterns/03-interaction/month-picker/provider/_flatpickr.scss @@ -1,3 +1,5 @@ +@use "../../../../tokens/variables"; + // Flatpickr - MonthPicker .osui-monthpicker__dropdown { &.flatpickr-calendar { @@ -11,20 +13,20 @@ .flatpickr-monthSelect-months { display: grid; - gap: $token-scale-200; + gap: variables.$token-scale-200; grid-template-columns: repeat(3, max-content); justify-items: center; margin: 0; .flatpickr-monthSelect-month { align-items: center; - border: $token-border-size-025 solid transparent; - border-radius: $token-border-radius-200; + border: variables.$token-border-size-025 solid transparent; + border-radius: variables.$token-border-radius-200; display: flex; - height: $token-scale-1000; + height: variables.$token-scale-1000; margin: 0; min-width: 70px; - transition: background-color $token-transition-time-100 $token-transition-curve-base; + transition: background-color variables.$token-transition-time-100 variables.$token-transition-curve-base; width: 100%; &:hover, @@ -33,7 +35,7 @@ } &.selected { - background-color: $token-semantics-primary-base; + background-color: variables.$token-semantics-primary-base; border-color: transparent; color: var(--color-text-inverse); } @@ -60,7 +62,7 @@ &:focus { background: var(--color-border-subtle); border-color: var(--osui-border-subtle); - color: $token-semantics-primary-base; + color: variables.$token-semantics-primary-base; } } } diff --git a/src/scss/04-patterns/03-interaction/notification/_notification.scss b/src/scss/04-patterns/03-interaction/notification/_notification.scss index 0b6c6ffd22..00df61e595 100644 --- a/src/scss/04-patterns/03-interaction/notification/_notification.scss +++ b/src/scss/04-patterns/03-interaction/notification/_notification.scss @@ -1,3 +1,6 @@ +@use '../../../00-abstract/index' as *; +@use "../../../tokens/variables"; + /* Patterns - Interaction - Notification */ //// /// @group Patterns-Notification @@ -7,14 +10,14 @@ .osui-notification { // ─── Component CSS API ───────────────────────────────────────────── --osui-notification-background: var(--color-background-surface); - --osui-notification-border-radius: #{$token-border-radius-100}; - --osui-notification-shadow: #{$token-elevation-3}; + --osui-notification-border-radius: #{variables.$token-border-radius-100}; + --osui-notification-shadow: #{variables.$token-elevation-3}; --osui-notification-color: var(--color-text); - --osui-notification-gap: #{$token-scale-400}; - --osui-notification-padding: #{$token-scale-400}; + --osui-notification-gap: #{variables.$token-scale-400}; + --osui-notification-padding: #{variables.$token-scale-400}; // ─────────────────────────────────────────────────────────────────── - --osui-notification-margin: #{$token-scale-600}; + --osui-notification-margin: #{variables.$token-scale-600}; align-items: center; background-color: var(--osui-notification-background); @@ -30,8 +33,8 @@ pointer-events: none; position: fixed; transition: - transform $token-transition-time-300 $token-transition-curve-quick, - opacity $token-transition-time-300 $token-transition-curve-quick; + transform variables.$token-transition-time-300 variables.$token-transition-curve-quick, + opacity variables.$token-transition-time-300 variables.$token-transition-curve-quick; user-select: none; width: var(--notification-width); z-index: var(--osui-notification-layer); @@ -44,23 +47,23 @@ // Type variants — aligned with Alert and runtime-mobile-widgets-js feedbackMessage &--is-info { - --osui-notification-background: #{$token-bg-info-subtle-default}; - --osui-notification-color: #{$token-text-info}; + --osui-notification-background: #{variables.$token-bg-info-subtle-default}; + --osui-notification-color: #{variables.$token-text-info}; } &--is-success { - --osui-notification-background: #{$token-bg-success-subtle-default}; - --osui-notification-color: #{$token-text-success}; + --osui-notification-background: #{variables.$token-bg-success-subtle-default}; + --osui-notification-color: #{variables.$token-text-success}; } &--is-error { - --osui-notification-background: #{$token-bg-danger-subtle-default}; - --osui-notification-color: #{$token-text-danger}; + --osui-notification-background: #{variables.$token-bg-danger-subtle-default}; + --osui-notification-color: #{variables.$token-text-danger}; } &--is-warning { - --osui-notification-background: #{$token-bg-warning-subtle-default}; - --osui-notification-color: #{$token-text-warning}; + --osui-notification-background: #{variables.$token-bg-warning-subtle-default}; + --osui-notification-color: #{variables.$token-text-warning}; } // Service Studio Preview @@ -204,7 +207,7 @@ // Responsive -------------------------------------------------------------------- .phone { .osui-notification { - --osui-notification-margin: #{$token-scale-400}; + --osui-notification-margin: #{variables.$token-scale-400}; } } diff --git a/src/scss/04-patterns/03-interaction/overflow-menu/_overflowmenu.scss b/src/scss/04-patterns/03-interaction/overflow-menu/_overflowmenu.scss index a2f1c630ae..36758d7b67 100644 --- a/src/scss/04-patterns/03-interaction/overflow-menu/_overflowmenu.scss +++ b/src/scss/04-patterns/03-interaction/overflow-menu/_overflowmenu.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/variables"; + /* Patterns - Navigation - OverflowMenu */ //// /// @group Patterns-OverflowMenu @@ -6,9 +8,9 @@ .osui-overflow-menu { // ─── Component CSS API ───────────────────────────────────────────── --osui-overflow-menu-background: var(--color-background-surface); - --osui-overflow-menu-shadow: #{$token-elevation-2}; + --osui-overflow-menu-shadow: #{variables.$token-elevation-2}; --osui-overflow-menu-color: var(--color-text); - --osui-overflow-menu-trigger-active-bg: #{$token-bg-neutral-subtle-default}; + --osui-overflow-menu-trigger-active-bg: #{variables.$token-bg-neutral-subtle-default}; // ─────────────────────────────────────────────────────────────────── display: inline-block; @@ -16,12 +18,12 @@ --border-radius-rounded: var(--border-radius-softer); &__trigger { - --osui-floating-offset: #{$token-scale-200}; + --osui-floating-offset: #{variables.$token-scale-200}; - border: $token-border-size-025 solid transparent; + border: variables.$token-border-size-025 solid transparent; border-radius: var(--osui-btn-border-radius, var(--border-radius-soft)); color: var(--osui-overflow-menu-color); - width: $token-scale-800; + width: variables.$token-scale-800; * { pointer-events: none; @@ -59,13 +61,13 @@ -servicestudio-align-items: center; -servicestudio-display: inline-flex !important; -servicestudio-color: var(--color-text); - -servicestudio-padding: $token-scale-200 $token-scale-400; + -servicestudio-padding: variables.$token-scale-200 variables.$token-scale-400; } } // To make extensibility with ExtendedClass easier a:not([class^='padding-']) { - padding: $token-scale-200 $token-scale-400; + padding: variables.$token-scale-200 variables.$token-scale-400; } } } @@ -90,7 +92,7 @@ html:has(.popup-backdrop) .osui-overflow-menu__balloon { .osui-overflow-menu__trigger { &.btn { // Longer specificity to be able to always override default responsive styles for buttons - width: $token-scale-1000; + width: variables.$token-scale-1000; } } } @@ -100,11 +102,11 @@ html:has(.popup-backdrop) .osui-overflow-menu__balloon { /// .os-high-contrast { .osui-overflow-menu__balloon { - border: $token-border-size-025 solid var(--color-border-input); + border: variables.$token-border-size-025 solid var(--color-border-input); a { &:hover { - outline: $token-border-size-075 solid var(--color-focus-outer); + outline: variables.$token-border-size-075 solid var(--color-focus-outer); } } } diff --git a/src/scss/04-patterns/03-interaction/range-slider/_rangeslider.scss b/src/scss/04-patterns/03-interaction/range-slider/_rangeslider.scss index 72e0d2a928..c9756627df 100644 --- a/src/scss/04-patterns/03-interaction/range-slider/_rangeslider.scss +++ b/src/scss/04-patterns/03-interaction/range-slider/_rangeslider.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/variables"; + /* Patterns - Interaction - Range Slider */ //// /// @group Patterns-Range_Slider @@ -10,17 +12,17 @@ --osui-range-slider-track-radius: var(--border-radius-rounded); --osui-range-slider-handle-background: var(--color-background-surface); --osui-range-slider-handle-border-color: var(--color-primary); - --osui-range-slider-handle-shadow: #{$token-elevation-1}; - --osui-range-slider-disabled-track-color: #{$token-bg-neutral-subtle-default}; + --osui-range-slider-handle-shadow: #{variables.$token-elevation-1}; + --osui-range-slider-disabled-track-color: #{variables.$token-bg-neutral-subtle-default}; --osui-range-slider-disabled-color: var(--color-text-disabled); // ─────────────────────────────────────────────────────────────────── - --range-slider-handle-size: #{$token-scale-400}; - --range-slider-thickness: #{$token-scale-100}; + --range-slider-handle-size: #{variables.$token-scale-400}; + --range-slider-thickness: #{variables.$token-scale-100}; --range-slider-handle-size-half: calc(var(--range-slider-handle-size) / 2); --range-slider-thickness-half: calc(var(--range-slider-thickness) / 2); --range-slider-handle-sliding-position: calc(var(--range-slider-handle-size-half) * -1); - padding: 0 $token-scale-400; + padding: 0 variables.$token-scale-400; &--is-vertical { height: var(--range-slider-size); @@ -30,7 +32,7 @@ &--has-ticks { .noUi { &-target { - margin: $token-scale-600 $token-scale-0 $token-scale-1000; + margin: variables.$token-scale-600 variables.$token-scale-0 variables.$token-scale-1000; } } } @@ -38,14 +40,14 @@ &:not(.osui-range-slider--has-ticks) { .noUi { &-target { - margin: $token-scale-600 $token-scale-0; + margin: variables.$token-scale-600 variables.$token-scale-0; } } } // Service Studio Preview & { - -servicestudio-margin-bottom: $token-scale-400; + -servicestudio-margin-bottom: variables.$token-scale-400; -servicestudio-display: block; -servicestudio-min-width: 150px; } @@ -58,7 +60,7 @@ &-target { background: var(--osui-range-slider-track-color); - border: $token-border-size-0; + border: variables.$token-border-size-0; border-radius: var(--osui-range-slider-track-radius); box-shadow: none; } @@ -67,13 +69,13 @@ &-vertical { .noUi-handle { background-color: var(--osui-range-slider-handle-background); - border: $token-border-size-050 solid var(--osui-range-slider-handle-border-color); + border: variables.$token-border-size-050 solid var(--osui-range-slider-handle-border-color); border-radius: var(--border-radius-rounded); box-shadow: var(--osui-range-slider-handle-shadow); cursor: pointer; display: inline-block; height: var(--range-slider-handle-size); - transition: transform $token-transition-time-150 ease-out; + transition: transform variables.$token-transition-time-150 ease-out; width: var(--range-slider-handle-size); } @@ -83,39 +85,39 @@ } .noUi-handle:before { - border-width: $token-border-size-0 $token-border-size-0 $token-border-size-0 $token-border-size-025; + border-width: variables.$token-border-size-0 variables.$token-border-size-0 variables.$token-border-size-0 variables.$token-border-size-025; left: calc(var(--range-slider-handle-size) / 4); right: auto; } .noUi-handle:after { - border-width: $token-border-size-0 $token-border-size-025; + border-width: variables.$token-border-size-0 variables.$token-border-size-025; left: calc(var(--range-slider-handle-size) / 2.5); - width: $token-scale-075; + width: variables.$token-scale-075; } .noUi-handle.noUi-active, .noUi-handle:hover { - border: $token-border-size-050 solid $token-semantics-primary-base; + border: variables.$token-border-size-050 solid variables.$token-semantics-primary-base; } .noUi-handle.noUi-active { box-shadow: var(--osui-range-slider-handle-shadow), - 0 0 0 #{$token-scale-150} color-mix(in srgb, #{$token-semantics-primary-base} 15%, transparent); + 0 0 0 #{variables.$token-scale-150} color-mix(in srgb, #{variables.$token-semantics-primary-base} 15%, transparent); } .noUi-handle.noUi-active:before, .noUi-handle.noUi-active:after, .noUi-handle:hover:before, .noUi-handle:hover:after { - border-color: $token-semantics-primary-base; + border-color: variables.$token-semantics-primary-base; } } &-vertical { height: var(--range-slider-size); - margin: $token-scale-600 $token-scale-0; + margin: variables.$token-scale-600 variables.$token-scale-0; width: var(--range-slider-thickness); .noUi-handle { @@ -152,7 +154,7 @@ } &-connect { - background: $token-semantics-primary-base; + background: variables.$token-semantics-primary-base; } &-background { @@ -160,9 +162,9 @@ } &-pips-horizontal { - height: $token-scale-1000; + height: variables.$token-scale-1000; left: 0; - padding: $token-scale-100 0 0; + padding: variables.$token-scale-100 0 0; top: 100%; width: 100%; } @@ -171,7 +173,7 @@ color: var(--color-text-subtlest); height: 100%; left: 100%; - padding: 0 0 0 $token-scale-100; + padding: 0 0 0 variables.$token-scale-100; top: 0; } @@ -182,39 +184,39 @@ &-horizontal { &.noUi-marker { - height: $token-scale-150; - width: $token-border-size-025; + height: variables.$token-scale-150; + width: variables.$token-border-size-025; } } &-vertical { &.noUi-marker { - height: $token-border-size-025; - width: $token-scale-150; + height: variables.$token-border-size-025; + width: variables.$token-scale-150; } &.noUi-marker-large { - width: $token-scale-150; + width: variables.$token-scale-150; } } } &-value-horizontal { - font-size: $token-font-size-300; - top: $token-scale-050; + font-size: variables.$token-font-size-300; + top: variables.$token-scale-050; } &-value-vertical { color: var(--color-text-subtlest); - font-size: $token-font-size-300; - padding-left: $token-scale-200; + font-size: variables.$token-font-size-300; + padding-left: variables.$token-scale-200; } &-tooltip { background: transparent; border: none; color: var(--color-text); - padding: $token-scale-100; + padding: variables.$token-scale-100; } &-rtl { @@ -223,12 +225,12 @@ } .noUi-value.noUi-value-vertical { - padding-left: $token-scale-0; - padding-right: $token-scale-600; + padding-left: variables.$token-scale-0; + padding-right: variables.$token-scale-600; } .noUi-marker.noUi-marker-vertical { - margin-right: $token-scale-400; + margin-right: variables.$token-scale-400; } } @@ -260,7 +262,7 @@ &-handle { background-color: var(--osui-range-slider-handle-background); - border: $token-border-size-025 solid var(--color-border-input); + border: variables.$token-border-size-025 solid var(--color-border-input); box-shadow: none; &:before, @@ -285,7 +287,7 @@ /// .has-accessible-features { .osui-range-slider { - border: $token-border-size-050 solid transparent; + border: variables.$token-border-size-050 solid transparent; &:focus-within { border-color: var(--color-focus-outer); @@ -293,7 +295,7 @@ .noUi-handle:focus { border-color: var(--color-text); - box-shadow: 0 0 0 $token-border-size-075 var(--color-focus-outer); + box-shadow: 0 0 0 variables.$token-border-size-075 var(--color-focus-outer); } } } @@ -312,7 +314,7 @@ .noUi-connect, .noUi-base { - border: $token-border-size-050 solid var(--color-border-input); + border: variables.$token-border-size-050 solid var(--color-border-input); } } diff --git a/src/scss/04-patterns/03-interaction/search/_search.scss b/src/scss/04-patterns/03-interaction/search/_search.scss index 2b0cec11af..ff3eb98802 100644 --- a/src/scss/04-patterns/03-interaction/search/_search.scss +++ b/src/scss/04-patterns/03-interaction/search/_search.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/variables"; + /* Patterns - Interaction - Search */ //// /// @group Patterns-Search @@ -17,7 +19,7 @@ &:empty { // Service Studio Preview - -servicestudio-background-color: $token-bg-surface-default; + -servicestudio-background-color: variables.$token-bg-surface-default; -servicestudio-border-radius: 4px; -servicestudio-height: 40px; } @@ -25,7 +27,7 @@ .form-control { &[data-input] { - padding-left: $token-scale-1000; + padding-left: variables.$token-scale-1000; } } } @@ -33,7 +35,7 @@ .form { .osui-search { input[data-input] { - margin-bottom: $token-scale-0; + margin-bottom: variables.$token-scale-0; } } } @@ -44,12 +46,12 @@ .osui-search { &__input:after { left: auto; - right: $token-scale-400; + right: variables.$token-scale-400; } .form-control[data-input] { - padding-left: $token-scale-400; - padding-right: $token-scale-1000; + padding-left: variables.$token-scale-400; + padding-right: variables.$token-scale-1000; } } } @@ -63,8 +65,8 @@ input[data-input] { &, &:empty { - border: $token-border-size-0; - padding-left: $token-scale-1000; + border: variables.$token-border-size-0; + padding-left: variables.$token-scale-1000; } } } @@ -75,7 +77,7 @@ input[data-input] { &, &:empty { - border-radius: $token-border-radius-0; + border-radius: variables.$token-border-radius-0; } } } diff --git a/src/scss/04-patterns/03-interaction/time-picker/_timepicker.scss b/src/scss/04-patterns/03-interaction/time-picker/_timepicker.scss index a970458401..1bc5c19634 100644 --- a/src/scss/04-patterns/03-interaction/time-picker/_timepicker.scss +++ b/src/scss/04-patterns/03-interaction/time-picker/_timepicker.scss @@ -4,7 +4,8 @@ /// Patterns - Interaction - TimePicker /// Import Flatpickr library styles -@import 'provider/flatpickr'; +@use 'provider/flatpickr'; +@use "../../../tokens/variables"; /// .osui-timepicker { @@ -31,7 +32,7 @@ // Disable states for Datepicker &.flatpickr-input[disabled] + input { background-color: var(--osui-timepicker-disabled-background); - border: $token-border-size-025 solid var(--osui-timepicker-disabled-border-color); + border: variables.$token-border-size-025 solid var(--osui-timepicker-disabled-border-color); color: var(--osui-timepicker-disabled-color); pointer-events: none; } @@ -55,11 +56,11 @@ // Service Studio Preview & { - -servicestudio-background-color: $token-primitives-base-white; - -servicestudio-border-radius: $token-border-radius-100; + -servicestudio-background-color: variables.$token-primitives-base-white; + -servicestudio-border-radius: variables.$token-border-radius-100; -servicestudio-display: flex; -servicestudio-justify-content: space-evenly; - -servicestudio-line-height: $token-scale-1000; + -servicestudio-line-height: variables.$token-scale-1000; -servicestudio-margin-top: 2px; -servicestudio-max-width: 320px; -servicestudio-position: relative; @@ -67,16 +68,16 @@ -servicestudio-z-index: var(--layer-local-tier-1); &.time12h { - padding-right: $token-scale-1200; + padding-right: variables.$token-scale-1200; &:after { - background-color: $token-primitives-neutral-700; + background-color: variables.$token-primitives-neutral-700; border-radius: var(--border-radius-rounded); - color: $token-primitives-base-white; + color: variables.$token-primitives-base-white; content: 'am'; font-size: clamp(10px, 1.5vw, 12px); - font-weight: $token-font-weight-semi-bold; - height: $token-scale-600; - line-height: $token-scale-600; + font-weight: variables.$token-font-weight-semi-bold; + height: variables.$token-scale-600; + line-height: variables.$token-scale-600; margin-right: 2%; position: absolute; right: 0; @@ -97,7 +98,7 @@ .not-valid + .input, .not-valid + .flatpickr-mobile { - border-color: $token-semantics-danger-base; + border-color: variables.$token-semantics-danger-base; } .flatpickr-mobile ~ span.validation-message { @@ -120,35 +121,35 @@ .flatpickr-time { align-items: center; padding: 0; - height: $token-scale-1000; + height: variables.$token-scale-1000; &.time24hr:after { display: none; } .numInputWrapper { - flex: 0 0 $token-scale-1200; - height: $token-scale-1000; + flex: 0 0 variables.$token-scale-1200; + height: variables.$token-scale-1000; text-align: center; - width: $token-scale-1200; + width: variables.$token-scale-1200; } // AM/PM styled as an input pill (no-calendar mode) .flatpickr-am-pm { align-items: center; background: var(--osui-input-background, var(--color-background-input)); - border: $token-border-size-025 solid var(--osui-input-border-color, var(--color-border)); - border-radius: $token-border-radius-200; + border: variables.$token-border-size-025 solid var(--osui-input-border-color, var(--color-border)); + border-radius: variables.$token-border-radius-200; color: var(--color-text-subtlest); display: flex; - font-size: $token-font-size-350; - font-weight: $token-font-weight-medium; - height: $token-scale-600; + font-size: variables.$token-font-size-350; + font-weight: variables.$token-font-weight-medium; + height: variables.$token-scale-600; justify-content: center; - margin-left: $token-scale-200; - margin-right: $token-scale-200; + margin-left: variables.$token-scale-200; + margin-right: variables.$token-scale-200; min-width: 44px; - padding: $token-scale-0 $token-scale-300; + padding: variables.$token-scale-0 variables.$token-scale-300; position: relative; text-transform: uppercase; width: auto; @@ -163,28 +164,28 @@ &.dropdown--is-large { .flatpickr-time { - height: $token-scale-1200; - max-height: $token-scale-1200; + height: variables.$token-scale-1200; + max-height: variables.$token-scale-1200; .numInputWrapper { - height: $token-scale-1200; + height: variables.$token-scale-1200; } .flatpickr-time-separator { - line-height: $token-scale-1200; + line-height: variables.$token-scale-1200; } } } &.dropdown--is-small { .flatpickr-time { - height: $token-scale-800; - max-height: $token-scale-800; + height: variables.$token-scale-800; + max-height: variables.$token-scale-800; .numInputWrapper { - height: $token-scale-800; + height: variables.$token-scale-800; } .flatpickr-time-separator { - line-height: $token-scale-800; + line-height: variables.$token-scale-800; } } } diff --git a/src/scss/04-patterns/03-interaction/time-picker/provider/_flatpickr.scss b/src/scss/04-patterns/03-interaction/time-picker/provider/_flatpickr.scss index b3dd7049f9..21ea4e943c 100644 --- a/src/scss/04-patterns/03-interaction/time-picker/provider/_flatpickr.scss +++ b/src/scss/04-patterns/03-interaction/time-picker/provider/_flatpickr.scss @@ -1,3 +1,5 @@ +@use "../../../../tokens/variables"; + // TimePicker .osui-timepicker__dropdown { .numInputWrapper { @@ -9,12 +11,12 @@ .flatpickr-time { .flatpickr-time-separator, .numInputWrapper .numInput { - font-weight: $token-font-weight-semi-bold; + font-weight: variables.$token-font-weight-semi-bold; } .flatpickr-time-separator { - color: $token-primitives-neutral-700; - line-height: $token-scale-1000; + color: variables.$token-primitives-neutral-700; + line-height: variables.$token-scale-1000; } } @@ -22,12 +24,12 @@ .flatpickr-am-pm { background-color: var(--color-border-input); border-radius: var(--border-radius-rounded); - height: $token-scale-600; - line-height: $token-scale-600; + height: variables.$token-scale-600; + line-height: variables.$token-scale-600; position: absolute; - right: $token-scale-100; + right: variables.$token-scale-100; text-transform: uppercase; - width: $token-scale-1000; + width: variables.$token-scale-1000; &:hover, &:focus { diff --git a/src/scss/04-patterns/03-interaction/tooltip/_tooltip.scss b/src/scss/04-patterns/03-interaction/tooltip/_tooltip.scss index 8bb06b5ce8..eb8ace5b07 100644 --- a/src/scss/04-patterns/03-interaction/tooltip/_tooltip.scss +++ b/src/scss/04-patterns/03-interaction/tooltip/_tooltip.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/variables"; + /* Patterns - Content - Tooltip */ //// /// @group Patterns-Tooltip @@ -6,18 +8,18 @@ /// .osui-tooltip { // ─── Component CSS API ───────────────────────────────────────────── - --osui-tooltip-background: #{$token-bg-neutral-boldest-default}; + --osui-tooltip-background: #{variables.$token-bg-neutral-boldest-default}; --osui-tooltip-color: var(--color-text-inverse); - --osui-tooltip-border-radius: #{$token-border-radius-100}; - --osui-tooltip-padding: #{$token-scale-200} #{$token-scale-400}; - --osui-tooltip-font-size: #{$token-font-size-350}; - --osui-tooltip-shadow: #{$token-elevation-2}; + --osui-tooltip-border-radius: #{variables.$token-border-radius-100}; + --osui-tooltip-padding: #{variables.$token-scale-200} #{variables.$token-scale-400}; + --osui-tooltip-font-size: #{variables.$token-font-size-350}; + --osui-tooltip-shadow: #{variables.$token-elevation-2}; --osui-tooltip-max-width: 184px; // ─────────────────────────────────────────────────────────────────── --osui-tooltip-background-color: var(--osui-tooltip-background); --osui-tooltip-arrow-size: 10px; - --osui-floating-offset: #{$token-scale-200}; + --osui-floating-offset: #{variables.$token-scale-200}; display: inline-block; position: relative; @@ -33,7 +35,7 @@ color: var(--osui-tooltip-color); font-size: var(--osui-tooltip-font-size); box-shadow: var(--osui-tooltip-shadow); - font-weight: $token-font-weight-regular; + font-weight: variables.$token-font-weight-regular; line-height: initial; max-width: var(--osui-tooltip-max-width); padding: var(--osui-tooltip-padding); @@ -115,20 +117,20 @@ } .osui-tooltip .osui-balloon--is-open { - animation: osui-tooltip-in $token-transition-time-150 $token-transition-curve-quick forwards; + animation: osui-tooltip-in variables.$token-transition-time-150 variables.$token-transition-curve-quick forwards; } // OS HighContrast Enabled ------------------------------------------------------- /// .os-high-contrast { .osui-tooltip { .osui-balloon { - border: $token-border-size-025 solid var(--osui-tooltip-background-color); + border: variables.$token-border-size-025 solid var(--osui-tooltip-background-color); } &__balloon-arrow { border: 0 solid var(--osui-tooltip-background-color); - border-right-width: $token-border-size-025; - border-bottom-width: $token-border-size-025; + border-right-width: variables.$token-border-size-025; + border-bottom-width: variables.$token-border-size-025; } } } diff --git a/src/scss/04-patterns/04-navigation/_bottom-bar-item.scss b/src/scss/04-patterns/04-navigation/_bottom-bar-item.scss index 123d5711db..bcc4e9279b 100644 --- a/src/scss/04-patterns/04-navigation/_bottom-bar-item.scss +++ b/src/scss/04-patterns/04-navigation/_bottom-bar-item.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Navigation - Bottom Bar Item */ //// /// @group Patterns-Bottom_Bar_Item @@ -13,7 +15,7 @@ // ─────────────────────────────────────────────────────────────────── background-color: var(--osui-bottom-bar-background); - border-top: $token-border-size-025 solid var(--osui-bottom-bar-border-color); + border-top: variables.$token-border-size-025 solid var(--osui-bottom-bar-border-color); height: 100%; } @@ -24,8 +26,8 @@ color: var(--color-text-subtlest); content: 'Add Bottom Bar Items to this Container'; display: block; - font-size: $token-font-size-300; - padding: $token-scale-500; + font-size: variables.$token-font-size-300; + padding: variables.$token-scale-500; text-align: center; } & > a, @@ -46,11 +48,11 @@ height: 100%; justify-content: center; overflow: hidden; - padding: 0 $token-scale-200; + padding: 0 variables.$token-scale-200; position: relative; &-icon { display: inline-flex; - font-size: $token-font-size-450; + font-size: variables.$token-font-size-450; height: auto; justify-content: center; } @@ -92,7 +94,7 @@ .bottom-bar { & > a:focus { background-color: transparent; - box-shadow: 0 0 0 $token-border-size-075 var(--color-focus-outer); + box-shadow: 0 0 0 variables.$token-border-size-075 var(--color-focus-outer); } } } diff --git a/src/scss/04-patterns/04-navigation/_breadcrumbs.scss b/src/scss/04-patterns/04-navigation/_breadcrumbs.scss index 57157f05a2..8336b44a6a 100644 --- a/src/scss/04-patterns/04-navigation/_breadcrumbs.scss +++ b/src/scss/04-patterns/04-navigation/_breadcrumbs.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Navigation - Breadcrumbs */ //// /// @group Patterns-Breadcrumbs @@ -19,8 +21,8 @@ align-items: center; color: var(--osui-breadcrumbs-item-color); display: inline-flex; - font-size: $token-font-size-350; - font-weight: $token-font-weight-regular; + font-size: variables.$token-font-size-350; + font-weight: variables.$token-font-weight-regular; line-height: 1; a, @@ -30,7 +32,7 @@ display: inline-flex; line-height: 1; text-decoration: none; - transition: color $token-transition-time-100 $token-transition-curve-base; + transition: color variables.$token-transition-time-100 variables.$token-transition-curve-base; &:hover { color: var(--color-text); @@ -38,7 +40,7 @@ } .icon { - font-size: $token-font-size-400; + font-size: variables.$token-font-size-400; } } @@ -46,10 +48,10 @@ align-items: center; color: var(--osui-breadcrumbs-separator-color); display: inline-flex; - font-size: $token-font-size-300; + font-size: variables.$token-font-size-300; justify-content: center; line-height: 1; - margin: $token-scale-0 $token-scale-200; + margin: variables.$token-scale-0 variables.$token-scale-200; width: auto; i { @@ -62,7 +64,7 @@ &-content > &-item:last-child, &-content > *:last-child > &-item { color: var(--color-text); - font-weight: $token-font-weight-semi-bold; + font-weight: variables.$token-font-weight-semi-bold; } } diff --git a/src/scss/04-patterns/04-navigation/_pagination.scss b/src/scss/04-patterns/04-navigation/_pagination.scss index 2853a71953..e9762be2c7 100644 --- a/src/scss/04-patterns/04-navigation/_pagination.scss +++ b/src/scss/04-patterns/04-navigation/_pagination.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Navigation - Pagination */ //// /// @group Patterns-Pagination @@ -8,12 +10,12 @@ // ─── Component CSS API ───────────────────────────────────────────── --osui-pagination-button-background: transparent; --osui-pagination-button-border-color: transparent; - --osui-pagination-button-border-width: #{$token-border-size-025}; + --osui-pagination-button-border-width: #{variables.$token-border-size-025}; --osui-pagination-button-color: var(--color-text); - --osui-pagination-button-font-weight: #{$token-font-weight-medium}; + --osui-pagination-button-font-weight: #{variables.$token-font-weight-medium}; --osui-pagination-button-hover-background: var(--color-border-subtle); - --osui-pagination-button-padding: #{$token-scale-0} #{$token-scale-100}; - --osui-pagination-button-size: #{$token-scale-900}; + --osui-pagination-button-padding: #{variables.$token-scale-0} #{variables.$token-scale-100}; + --osui-pagination-button-size: #{variables.$token-scale-900}; --osui-pagination-active-border-color: var(--color-border); --osui-pagination-active-color: var(--color-text-subtlest); --osui-pagination-counter-color: var(--color-text-subtlest); @@ -22,7 +24,7 @@ align-items: center; display: flex; justify-content: space-between; - margin-top: $token-scale-600; + margin-top: variables.$token-scale-600; // pagination-container &-container { @@ -42,13 +44,13 @@ & > .pagination-button:first-child::before { content: var(--osui-icon-chevron-left); font-family: var(--osui-icon-font-family); - font-size: $token-scale-400; + font-size: variables.$token-scale-400; } & > .pagination-button:last-child::before { content: var(--osui-icon-chevron-right); font-family: var(--osui-icon-font-family); - font-size: $token-scale-400; + font-size: variables.$token-scale-400; } .list { @@ -63,18 +65,18 @@ align-items: center; background-color: var(--osui-pagination-button-background); border: var(--osui-pagination-button-border-width) solid var(--osui-pagination-button-border-color); - border-radius: $token-border-radius-200; + border-radius: variables.$token-border-radius-200; color: var(--osui-pagination-button-color); cursor: pointer; display: inline-flex; font-weight: var(--osui-pagination-button-font-weight); height: var(--osui-pagination-button-size); justify-content: center; - margin-left: $token-scale-100; + margin-left: variables.$token-scale-100; padding: var(--osui-pagination-button-padding); transition: - background-color $token-transition-time-100 $token-transition-curve-expressive, - border-color $token-transition-time-100 $token-transition-curve-expressive; + background-color variables.$token-transition-time-100 variables.$token-transition-curve-expressive, + border-color variables.$token-transition-time-100 variables.$token-transition-curve-expressive; width: var(--osui-pagination-button-size); &[disabled] { @@ -93,7 +95,7 @@ background-color: transparent; border: 0; cursor: auto; - width: $token-scale-400; + width: variables.$token-scale-400; } } @@ -118,7 +120,7 @@ .form-control[data-input] { height: var(--osui-pagination-button-size); - margin: $token-scale-0 $token-scale-100; + margin: variables.$token-scale-0 variables.$token-scale-100; padding: 0; text-align: center; width: var(--osui-pagination-button-size); @@ -138,8 +140,8 @@ .pagination { &-button, .form-control[data-input] { - height: $token-scale-1000; - width: $token-scale-1000; + height: variables.$token-scale-1000; + width: variables.$token-scale-1000; } } } @@ -150,13 +152,13 @@ flex-direction: column; &-container { - margin-top: $token-scale-400; + margin-top: variables.$token-scale-400; } &-button, .form-control[data-input] { - height: $token-scale-1000; - width: $token-scale-1000; + height: variables.$token-scale-1000; + width: variables.$token-scale-1000; } } } @@ -166,7 +168,7 @@ .is-rtl { .pagination-button { margin-left: 0; - margin-right: $token-scale-100; + margin-right: variables.$token-scale-100; .icon { transform: rotate(180deg); @@ -188,8 +190,8 @@ /// .has-accessible-features { .pagination-button:focus { - border-color: $token-semantics-primary-base; - box-shadow: 0 0 0 $token-border-size-075 color-mix(in srgb, #{$token-semantics-primary-base} 22%, transparent); + border-color: variables.$token-semantics-primary-base; + box-shadow: 0 0 0 variables.$token-border-size-075 color-mix(in srgb, #{variables.$token-semantics-primary-base} 22%, transparent); } } @@ -197,6 +199,6 @@ /// .os-high-contrast { .pagination-button.is--active { - outline: $token-border-size-075 solid $token-semantics-primary-base; + outline: variables.$token-border-size-075 solid variables.$token-semantics-primary-base; } } diff --git a/src/scss/04-patterns/04-navigation/_timeline.scss b/src/scss/04-patterns/04-navigation/_timeline.scss index 1c13b65bba..ead770aab0 100644 --- a/src/scss/04-patterns/04-navigation/_timeline.scss +++ b/src/scss/04-patterns/04-navigation/_timeline.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Navigation - Timeline */ //// /// @group Patterns-Timeline @@ -6,7 +8,7 @@ /// .timeline { // ─── Component CSS API ───────────────────────────────────────────── - --osui-timeline-line-color: #{$token-bg-neutral-base-default}; + --osui-timeline-line-color: #{variables.$token-bg-neutral-base-default}; --osui-timeline-icon-color: var(--color-text-inverse); --osui-timeline-text-color: var(--color-text-subtlest); // ─────────────────────────────────────────────────────────────────── @@ -18,12 +20,12 @@ .timeline-content, .timeline-right { - padding-top: $token-scale-100; + padding-top: variables.$token-scale-100; } .timeline-content { flex: 1; - margin-bottom: $token-scale-1000; + margin-bottom: variables.$token-scale-1000; } } @@ -34,9 +36,9 @@ position: relative; &-line { - background-color: var(--osui-timeline-line-color, #{$token-bg-neutral-base-default}); + background-color: var(--osui-timeline-line-color, #{variables.$token-bg-neutral-base-default}); flex: 1; - margin: $token-scale-200 $token-scale-0 $token-scale-200; + margin: variables.$token-scale-200 variables.$token-scale-0 variables.$token-scale-200; width: 1px; } @@ -45,16 +47,16 @@ border-radius: 50%; color: var(--osui-timeline-icon-color, var(--color-text-inverse)); display: flex; - font-size: $token-font-size-300; - height: $token-scale-700; + font-size: variables.$token-font-size-300; + height: variables.$token-scale-700; justify-content: center; - margin: $token-scale-0 $token-scale-400; + margin: variables.$token-scale-0 variables.$token-scale-400; text-align: center; - width: $token-scale-700; + width: variables.$token-scale-700; &:empty { height: 8px; // design-spec: dot size, no token equivalent - margin: 10px $token-scale-600 0; // design-spec: 10px top offset + margin: 10px variables.$token-scale-600 0; // design-spec: 10px top offset width: 8px; // design-spec: dot size, no token equivalent } } @@ -66,7 +68,7 @@ } &-right { - margin-left: $token-scale-400; + margin-left: variables.$token-scale-400; white-space: nowrap; } diff --git a/src/scss/04-patterns/04-navigation/_wizard.scss b/src/scss/04-patterns/04-navigation/_wizard.scss index 9cf7b324bd..d31edde8e9 100644 --- a/src/scss/04-patterns/04-navigation/_wizard.scss +++ b/src/scss/04-patterns/04-navigation/_wizard.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Navigation - Wizard */ //// /// @group Patterns-Wizard @@ -9,18 +11,18 @@ // ─── Component CSS API ───────────────────────────────────────────── --osui-wizard-icon-background: var(--color-background-surface); --osui-wizard-icon-border-color: var(--color-border-input); - --osui-wizard-icon-border-width: #{$token-border-size-050}; - --osui-wizard-icon-color: #{$token-text-subtlest}; - --osui-wizard-icon-size: #{$token-scale-1000}; + --osui-wizard-icon-border-width: #{variables.$token-border-size-050}; + --osui-wizard-icon-color: #{variables.$token-text-subtlest}; + --osui-wizard-icon-size: #{variables.$token-scale-1000}; --osui-wizard-label-color: var(--color-text); --osui-wizard-active-color: var(--color-primary); - --osui-wizard-active-icon-color: #{$token-text-primary}; - --osui-wizard-next-icon-color: #{$token-text-subtlest}; + --osui-wizard-active-icon-color: #{variables.$token-text-primary}; + --osui-wizard-next-icon-color: #{variables.$token-text-subtlest}; --osui-wizard-past-background: var(--color-primary); --osui-wizard-past-color: var(--color-text-inverse); - --osui-wizard-connector-color: #{$token-bg-neutral-base-default}; + --osui-wizard-connector-color: #{variables.$token-bg-neutral-base-default}; --osui-wizard-focus-halo-color: var(--osui-border-focus-halo); - --osui-wizard-focus-halo-width: #{$token-border-size-075}; + --osui-wizard-focus-halo-width: #{variables.$token-border-size-075}; // ─────────────────────────────────────────────────────────────────── &.wizard-vertical { @@ -28,7 +30,7 @@ .wizard-wrapper-item { align-items: center; flex-direction: row; - margin-bottom: $token-scale-800; + margin-bottom: variables.$token-scale-800; &.label-top { flex-direction: row-reverse; @@ -36,7 +38,7 @@ } &:last-child { - margin-bottom: $token-scale-0; + margin-bottom: variables.$token-scale-0; } } @@ -90,11 +92,11 @@ border-radius: 50%; color: var(--osui-wizard-icon-color); display: flex; - height: var(--osui-wizard-icon-size, #{$token-scale-1000}); + height: var(--osui-wizard-icon-size, #{variables.$token-scale-1000}); justify-content: center; margin: 0 auto; position: relative; - width: var(--osui-wizard-icon-size, #{$token-scale-1000}); + width: var(--osui-wizard-icon-size, #{variables.$token-scale-1000}); z-index: var(--layer-local-tier-1); [data-block*='WizardItem']:focus-visible & { @@ -108,7 +110,7 @@ } &-wrapper { - margin: $token-scale-200 $token-scale-0; + margin: variables.$token-scale-200 variables.$token-scale-0; position: relative; width: 100%; @@ -117,21 +119,21 @@ content: ''; height: 2px; position: absolute; - right: calc(50% + var(--osui-wizard-icon-size, #{$token-scale-1000}) / 2); + right: calc(50% + var(--osui-wizard-icon-size, #{variables.$token-scale-1000}) / 2); top: 50%; transform: translateY(-50%); - width: calc(100% - var(--osui-wizard-icon-size, #{$token-scale-1000})); + width: calc(100% - var(--osui-wizard-icon-size, #{variables.$token-scale-1000})); z-index: var(--layer-screen); } &:has(.wizard-item-icon:empty):before { - right: calc(50% + #{$token-scale-100}); - width: calc(100% - #{$token-scale-200}); + right: calc(50% + #{variables.$token-scale-100}); + width: calc(100% - #{variables.$token-scale-200}); } } .icon { - font-size: $token-font-size-400; + font-size: variables.$token-font-size-400; width: auto; } } @@ -142,7 +144,7 @@ &-icon { background-color: var(--osui-wizard-icon-background); border-color: var(--osui-wizard-active-color); - box-shadow: 0 0 0 $token-scale-100 + box-shadow: 0 0 0 variables.$token-scale-100 color-mix(in srgb, var(--osui-wizard-active-color) 15%, transparent); color: var(--osui-wizard-active-icon-color); @@ -155,7 +157,7 @@ &-label { color: var(--color-text); - font-weight: $token-font-weight-medium; + font-weight: variables.$token-font-weight-medium; } } } @@ -197,14 +199,14 @@ &-vertical { .wizard-item-icon-wrapper { - margin: $token-scale-0 $token-scale-200 $token-scale-0 $token-scale-0; + margin: variables.$token-scale-0 variables.$token-scale-200 variables.$token-scale-0 variables.$token-scale-0; width: auto; } .wizard-wrapper-item { .wizard-item-icon-wrapper { &:before { - bottom: calc(50% + var(--osui-wizard-icon-size, #{$token-scale-1000}) / 2); + bottom: calc(50% + var(--osui-wizard-icon-size, #{variables.$token-scale-1000}) / 2); height: calc(100% + 18px); // design-spec: 18px connector overhang left: 50%; top: auto; @@ -219,7 +221,7 @@ } .wizard-item-icon-wrapper { - margin: $token-scale-0 $token-scale-0 $token-scale-0 $token-scale-200; + margin: variables.$token-scale-0 variables.$token-scale-0 variables.$token-scale-0 variables.$token-scale-200; } } } @@ -264,7 +266,7 @@ html[data-uieditorversion^='1'] { &:last-child { & { - -servicestudio-margin-bottom: $token-scale-0; + -servicestudio-margin-bottom: variables.$token-scale-0; } } } @@ -285,13 +287,13 @@ html[data-uieditorversion^='1'] { .is-rtl { .wizard-vertical { .wizard-item-icon-wrapper { - margin: $token-scale-0 $token-scale-0 $token-scale-0 $token-scale-200; + margin: variables.$token-scale-0 variables.$token-scale-0 variables.$token-scale-0 variables.$token-scale-200; } .wizard-wrapper-item { &.label-top { .wizard-item-icon-wrapper { - margin: $token-scale-0 $token-scale-200 $token-scale-0 $token-scale-0; + margin: variables.$token-scale-0 variables.$token-scale-200 variables.$token-scale-0 variables.$token-scale-0; } } } diff --git a/src/scss/04-patterns/04-navigation/section-index/_sectionindex.scss b/src/scss/04-patterns/04-navigation/section-index/_sectionindex.scss index 067b35ce3a..b0ab319c0b 100644 --- a/src/scss/04-patterns/04-navigation/section-index/_sectionindex.scss +++ b/src/scss/04-patterns/04-navigation/section-index/_sectionindex.scss @@ -1,3 +1,6 @@ +@use '../../../00-abstract/index' as *; +@use "../../../tokens/variables"; + /* Patterns - section - SectionIndex */ //// /// @group Patterns-SectionIndex @@ -45,8 +48,8 @@ color: var(--osui-section-index-item-color); cursor: pointer; display: flex; - min-height: $token-scale-1100; - padding: $token-scale-200 $token-scale-400 $token-scale-200 $token-scale-600; + min-height: variables.$token-scale-1100; + padding: variables.$token-scale-200 variables.$token-scale-400 variables.$token-scale-200 variables.$token-scale-600; position: relative; } @@ -83,7 +86,7 @@ .osui-section-index-item { &:focus { background-color: transparent; - box-shadow: 0 0 0 $token-border-size-075 var(--color-focus-outer); + box-shadow: 0 0 0 variables.$token-border-size-075 var(--color-focus-outer); } } } @@ -92,13 +95,13 @@ /// .os-high-contrast { .osui-section-index::before { - border-left: $token-border-size-025 solid var(--color-focus-outer); + border-left: variables.$token-border-size-025 solid var(--color-focus-outer); } .osui-section-index-item { &--is-active { &::before { - border-left: $token-border-size-075 solid var(--color-focus-outer); + border-left: variables.$token-border-size-075 solid var(--color-focus-outer); } } } @@ -117,8 +120,8 @@ .osui-section-index-item { &, &:visited { - padding-left: $token-scale-400; - padding-right: $token-scale-600; + padding-left: variables.$token-scale-400; + padding-right: variables.$token-scale-600; } &--is-active { @@ -135,8 +138,8 @@ .phone { .osui-section-index { &--is-sticky { - left: calc(var(--os-safe-area-right) + $token-scale-400); - padding: 0 $token-scale-400 0 0; + left: calc(var(--os-safe-area-right) + variables.$token-scale-400); + padding: 0 variables.$token-scale-400 0 0; position: fixed; top: var(--top-position); z-index: var(--layer-local-tier-1); @@ -147,8 +150,8 @@ .osui-section-index { &--is-sticky { left: initial; - right: calc(var(--os-safe-area-right) + $token-scale-400); - padding: 0 0 $token-scale-400 0; + right: calc(var(--os-safe-area-right) + variables.$token-scale-400); + padding: 0 0 variables.$token-scale-400 0; } } } diff --git a/src/scss/04-patterns/04-navigation/sidebar/_sidebar.scss b/src/scss/04-patterns/04-navigation/sidebar/_sidebar.scss index 0b57524988..f4a794efb1 100644 --- a/src/scss/04-patterns/04-navigation/sidebar/_sidebar.scss +++ b/src/scss/04-patterns/04-navigation/sidebar/_sidebar.scss @@ -1,3 +1,6 @@ +@use '../../../00-abstract/index' as *; +@use "../../../tokens/variables"; + /* Patterns - Interaction - Sidebar */ //// /// @group Patterns-Sidebar @@ -8,9 +11,9 @@ // ─── Component CSS API ───────────────────────────────────────────── --osui-sidebar-background: var(--color-background-surface); --osui-sidebar-color: var(--color-text); - --osui-sidebar-shadow: #{$token-elevation-3}; - --osui-sidebar-padding-x: #{$token-scale-600}; - --osui-sidebar-padding-y: #{$token-scale-400}; + --osui-sidebar-shadow: #{variables.$token-elevation-3}; + --osui-sidebar-padding-x: #{variables.$token-scale-600}; + --osui-sidebar-padding-y: #{variables.$token-scale-400}; // ─────────────────────────────────────────────────────────────────── --overlay-opacity: 0; @@ -21,12 +24,12 @@ display: flex; flex-direction: column; height: 100%; - margin: $token-scale-0; + margin: variables.$token-scale-0; position: fixed; top: 0; transition: opacity, - transform $token-transition-time-300 $token-transition-curve-quick; + transform variables.$token-transition-time-300 variables.$token-transition-curve-quick; width: var(--sidebar-width); will-change: transform; z-index: var(--osui-sidebar-layer); @@ -45,7 +48,7 @@ content: ''; height: 100%; position: fixed; - width: $token-scale-600; + width: variables.$token-scale-600; } &--is-right { @@ -113,7 +116,7 @@ &--has-overlay { &::before { - background-color: $token-backdrop; + background-color: variables.$token-backdrop; content: ''; cursor: pointer; display: block; @@ -122,7 +125,7 @@ pointer-events: none; position: fixed; top: 0; - transition: opacity var(--osui-motion-duration-130) $token-transition-curve-base; + transition: opacity var(--osui-motion-duration-130) variables.$token-transition-curve-base; width: 200vw; will-change: opacity; z-index: var(--osui-sidebar-layer); @@ -150,7 +153,7 @@ &--is-open { opacity: 1; transform: none; - transition: transform $token-transition-time-500 $token-transition-curve-quick; + transition: transform variables.$token-transition-time-500 variables.$token-transition-curve-quick; will-change: transform; &.osui-sidebar--has-overlay { @@ -227,8 +230,8 @@ .active-screen { .osui-sidebar { &--is-open { - border-left: $token-border-size-050 solid var(--color-focus-outer); - border-right: $token-border-size-050 solid var(--color-focus-outer); + border-left: variables.$token-border-size-050 solid var(--color-focus-outer); + border-right: variables.$token-border-size-050 solid var(--color-focus-outer); } } } diff --git a/src/scss/04-patterns/04-navigation/submenu/_submenu.scss b/src/scss/04-patterns/04-navigation/submenu/_submenu.scss index 8e42fc82c2..d7931fbc51 100644 --- a/src/scss/04-patterns/04-navigation/submenu/_submenu.scss +++ b/src/scss/04-patterns/04-navigation/submenu/_submenu.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/variables"; + /* Patterns - Navigation - Submenu */ //// /// @group Patterns-Submenu @@ -8,7 +10,7 @@ // ─── Component CSS API ───────────────────────────────────────────── --osui-submenu-items-background: var(--color-background-surface); --osui-submenu-items-border-color: transparent; - --osui-submenu-items-shadow: #{$token-elevation-2}; + --osui-submenu-items-shadow: #{variables.$token-elevation-2}; --osui-submenu-item-color: var(--color-text-subtlest); --osui-submenu-header-color: var(--color-text); --osui-submenu-active-border-color: var( @@ -45,7 +47,7 @@ .osui-submenu { &__header { - border-bottom: $token-border-size-050 solid var(--osui-submenu-active-border-color); + border-bottom: variables.$token-border-size-050 solid var(--osui-submenu-active-border-color); &__item { &, @@ -92,11 +94,11 @@ &__header { align-items: center; - border-bottom: $token-border-size-050 solid transparent; - border-top: $token-border-size-050 solid transparent; + border-bottom: variables.$token-border-size-050 solid transparent; + border-top: variables.$token-border-size-050 solid transparent; display: flex; - padding: $token-scale-0 $token-scale-200; - transition: all $token-transition-time-150 $token-transition-curve-linear; + padding: variables.$token-scale-0 variables.$token-scale-200; + transition: all variables.$token-transition-time-150 variables.$token-transition-curve-linear; &__item { align-items: center; @@ -104,10 +106,10 @@ display: inline-flex; height: 100%; position: relative; - transition: all $token-transition-time-150 $token-transition-curve-linear; + transition: all variables.$token-transition-time-150 variables.$token-transition-curve-linear; -servicestudio-min-width: 100px; - -servicestudio-margin-left: calc($token-scale-200 * -1); + -servicestudio-margin-left: calc(variables.$token-scale-200 * -1); a { align-items: center; @@ -123,8 +125,8 @@ } &__icon { - margin-inline-start: $token-scale-200; - transition: transform $token-transition-time-200 $token-transition-curve-expressive; + margin-inline-start: variables.$token-scale-200; + transition: transform variables.$token-transition-time-200 variables.$token-transition-curve-expressive; transform-origin: center; &:after { @@ -137,7 +139,7 @@ &__items { background-color: var(--osui-submenu-items-background); border: none; - border-radius: $token-border-radius-200; + border-radius: variables.$token-border-radius-200; box-shadow: var(--osui-submenu-items-shadow); display: flex; flex-direction: column; @@ -147,18 +149,18 @@ opacity: 0; overflow-x: hidden; overflow-y: auto; - padding: $token-scale-0; + padding: variables.$token-scale-0; pointer-events: none; position: absolute; - top: calc(100% + $token-scale-100); + top: calc(100% + variables.$token-scale-100); transform: translateY(-8px); // design-spec - transition: all var(--osui-motion-duration-130) $token-transition-curve-quick; + transition: all var(--osui-motion-duration-130) variables.$token-transition-curve-quick; width: max-content; z-index: var(--layer-elevated); // Scrollbar &::-webkit-scrollbar { - width: $token-scale-100; + width: variables.$token-scale-100; } &::-webkit-scrollbar-track { @@ -181,9 +183,9 @@ a { color: var(--osui-submenu-item-color); margin: 0; - padding: $token-scale-200 $token-scale-400; + padding: variables.$token-scale-200 variables.$token-scale-400; text-decoration: none; - transition: background-color $token-transition-time-150 $token-transition-curve-linear; + transition: background-color variables.$token-transition-time-150 variables.$token-transition-curve-linear; white-space: nowrap; &.active { @@ -222,7 +224,7 @@ /// .layout-side .app-menu-links .osui-submenu, .menu-visible .app-menu-links .osui-submenu { - --osui-submenu-items-background: var(--color-background-sidemenu, #{$token-bg-surface-default}); + --osui-submenu-items-background: var(--color-background-sidemenu, #{variables.$token-bg-surface-default}); display: flex; flex-direction: column; @@ -235,8 +237,8 @@ } &.active .osui-submenu__header { - background-color: $token-bg-primary-subtle-default; - border-radius: $token-border-radius-200; + background-color: variables.$token-bg-primary-subtle-default; + border-radius: variables.$token-border-radius-200; } &--is-open > .osui-submenu__items { @@ -251,7 +253,7 @@ .osui-submenu__header { border: none; - padding: $token-scale-200 $token-scale-400; + padding: variables.$token-scale-200 variables.$token-scale-400; width: 100%; &__item { @@ -264,15 +266,15 @@ box-shadow: none; display: none; opacity: 1; - padding: $token-scale-100 $token-scale-600; + padding: variables.$token-scale-100 variables.$token-scale-600; pointer-events: auto; position: relative; top: 0; transform: translateY(0); a { - border-radius: $token-border-radius-200; - padding: $token-scale-200 $token-scale-400 $token-scale-200 $token-scale-600; + border-radius: variables.$token-border-radius-200; + padding: variables.$token-scale-200 variables.$token-scale-400 variables.$token-scale-200 variables.$token-scale-600; &:hover { background-color: var(--osui-bg-surface-hover); @@ -280,8 +282,8 @@ } &.active { - background-color: $token-bg-primary-subtle-default; - color: $token-semantics-primary-base; + background-color: variables.$token-bg-primary-subtle-default; + color: variables.$token-semantics-primary-base; } } } @@ -289,7 +291,7 @@ .layout-side .app-menu-links .osui-submenu__header a, .menu-visible .app-menu-links .osui-submenu__header a { - padding: $token-scale-0; + padding: variables.$token-scale-0; } // Columns inside submenu items collapse to single column @@ -360,17 +362,17 @@ .app-menu-links .osui-submenu__header { align-self: center; border-bottom: none; - border-radius: $token-border-radius-200; + border-radius: variables.$token-border-radius-200; border-top: none; - margin: 0 $token-scale-025; - padding: $token-scale-200 $token-scale-300; - transition: background-color $token-transition-time-150 $token-transition-curve-linear; + margin: 0 variables.$token-scale-025; + padding: variables.$token-scale-200 variables.$token-scale-300; + transition: background-color variables.$token-transition-time-150 variables.$token-transition-curve-linear; } .app-menu-links .osui-submenu__header:hover, .app-menu-links .osui-submenu--is-open .osui-submenu__header { background-color: var(--osui-bg-surface-hover); - border-radius: $token-border-radius-200; + border-radius: variables.$token-border-radius-200; color: var(--color-text); } @@ -382,11 +384,11 @@ .header-navigation .app-menu-links > a { align-self: center; border-bottom: none; - border-radius: $token-border-radius-200; + border-radius: variables.$token-border-radius-200; border-top: none; - margin: 0 $token-scale-025; - padding: $token-scale-200 $token-scale-300; - transition: background-color $token-transition-time-150 $token-transition-curve-linear; + margin: 0 variables.$token-scale-025; + padding: variables.$token-scale-200 variables.$token-scale-300; + transition: background-color variables.$token-transition-time-150 variables.$token-transition-curve-linear; &:hover { background-color: var(--osui-bg-surface-hover); @@ -415,7 +417,7 @@ background-color: var(--osui-bg-surface-hover); border-bottom: none; border-left: none; - border-radius: $token-border-radius-200; + border-radius: variables.$token-border-radius-200; } } } @@ -424,7 +426,7 @@ // Side menu: direct link hover .app-menu-links > a:hover { background-color: var(--osui-bg-surface-hover); - border-radius: $token-border-radius-200; + border-radius: variables.$token-border-radius-200; color: var(--color-text); } } @@ -441,7 +443,7 @@ // Top menu: header navigation direct link .desktop .header-navigation .app-menu-links > a.active:hover { background-color: var(--osui-bg-surface-hover); - color: $token-semantics-primary-base; + color: variables.$token-semantics-primary-base; } // Top menu: submenu items @@ -452,7 +454,7 @@ // Side menu desktop: direct link .desktop .layout-side .app-menu-links > a.active:hover { background-color: var(--osui-bg-surface-hover); - color: $token-semantics-primary-base; + color: variables.$token-semantics-primary-base; } // Side menu desktop: submenu header @@ -464,7 +466,7 @@ // Side menu desktop: submenu items .desktop .layout-side .app-menu-links .osui-submenu__items a.active:hover { background-color: var(--osui-bg-surface-hover); - color: $token-semantics-primary-base; + color: variables.$token-semantics-primary-base; } /// @@ -492,7 +494,7 @@ &__header { border: none; - padding: $token-scale-200 $token-scale-400; + padding: variables.$token-scale-200 variables.$token-scale-400; &__item { flex: 1; @@ -500,7 +502,7 @@ &:hover { background-color: var(--osui-bg-surface-hover); - border-radius: $token-border-radius-200; + border-radius: variables.$token-border-radius-200; color: var(--color-text); } } @@ -519,12 +521,12 @@ width: 100%; a { - border-radius: $token-border-radius-200; - padding: $token-scale-200 $token-scale-400 $token-scale-200 $token-scale-600; + border-radius: variables.$token-border-radius-200; + padding: variables.$token-scale-200 variables.$token-scale-400 variables.$token-scale-200 variables.$token-scale-600; &.active { background-color: transparent; - color: $token-semantics-primary-base; + color: variables.$token-semantics-primary-base; } &:hover { @@ -538,7 +540,7 @@ .app-menu-links > a { &:hover { background-color: var(--osui-bg-surface-hover); - border-radius: $token-border-radius-200; + border-radius: variables.$token-border-radius-200; color: var(--color-text); } } @@ -546,20 +548,20 @@ // Mobile/tablet: submenu header active hover .osui-submenu.active .osui-submenu__header:hover { background-color: var(--osui-bg-surface-hover); - border-radius: $token-border-radius-200; + border-radius: variables.$token-border-radius-200; color: var(--osui-submenu-active-border-color); } // Mobile/tablet: submenu items active hover .osui-submenu__items a.active:hover { background-color: var(--osui-bg-surface-hover); - color: $token-semantics-primary-base; + color: variables.$token-semantics-primary-base; } // Mobile/tablet: direct link active hover .app-menu-links > a.active:hover { background-color: var(--osui-bg-surface-hover); - color: $token-semantics-primary-base; + color: variables.$token-semantics-primary-base; } } @@ -570,7 +572,7 @@ .osui-submenu { .osui-submenu__header { border-left: 0; - border-right: $token-border-size-050 solid transparent; + border-right: variables.$token-border-size-050 solid transparent; } &.active .osui-submenu__header { @@ -581,8 +583,8 @@ } .app-menu-links .osui-submenu__items a { - padding-left: $token-scale-400; - padding-right: $token-scale-600; + padding-left: variables.$token-scale-400; + padding-right: variables.$token-scale-600; } } @@ -597,13 +599,13 @@ .osui-submenu__header { border-left: 0; - border-right: $token-border-size-050 solid transparent; + border-right: variables.$token-border-size-050 solid transparent; } } .osui-submenu__items a { - padding-left: $token-scale-400; - padding-right: $token-scale-600; + padding-left: variables.$token-scale-400; + padding-right: variables.$token-scale-600; } } } diff --git a/src/scss/04-patterns/04-navigation/tabs/_tabs.scss b/src/scss/04-patterns/04-navigation/tabs/_tabs.scss index 46ecc81c2e..f3c42cc8ba 100644 --- a/src/scss/04-patterns/04-navigation/tabs/_tabs.scss +++ b/src/scss/04-patterns/04-navigation/tabs/_tabs.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/variables"; + /* Patterns - Navigation - Tabs */ //// /// @group Patterns-Tabs @@ -8,11 +10,11 @@ // ─── Component CSS API ───────────────────────────────────────────── --osui-tabs-border-color: var(--color-border); --osui-tabs-header-item-color: var(--color-text-subtlest); - --osui-tabs-header-item-color-active: #{$token-text-select}; + --osui-tabs-header-item-color-active: #{variables.$token-text-select}; --osui-tabs-header-item-color-active-hover: var(--color-primary-selected); --osui-tabs-header-item-color-hover: var(--color-text-subtlest); --osui-tabs-header-item-color-disabled: var(--color-text-disabled); - --osui-tabs-header-item-hover-background: #{$token-bg-neutral-subtle-default}; + --osui-tabs-header-item-hover-background: #{variables.$token-bg-neutral-subtle-default}; --osui-tabs-indicator-color: var(--color-primary); // ─────────────────────────────────────────────────────────────────── @@ -32,7 +34,7 @@ grid-column: 2; .osui-tabs__header-item { - padding: $token-scale-200 0 $token-scale-200 $token-scale-400; + padding: variables.$token-scale-200 0 variables.$token-scale-200 variables.$token-scale-400; } & > .osui-tabs__header__indicator { @@ -41,7 +43,7 @@ } .osui-tabs__content { - border-right: $token-border-size-025 solid var(--osui-tabs-border-color); + border-right: variables.$token-border-size-025 solid var(--osui-tabs-border-color); margin-right: -1px; } } @@ -53,7 +55,7 @@ & > .osui-tabs__header { .osui-tabs__header-item { justify-content: flex-start; - padding: $token-scale-200 $token-scale-400 $token-scale-200 0; + padding: variables.$token-scale-200 variables.$token-scale-400 variables.$token-scale-200 0; } & > .osui-tabs__header__indicator { @@ -62,7 +64,7 @@ } .osui-tabs__content { - border-left: $token-border-size-025 solid var(--osui-tabs-border-color); + border-left: variables.$token-border-size-025 solid var(--osui-tabs-border-color); margin-left: -1px; } } @@ -81,7 +83,7 @@ position: absolute; top: 0; transform: translateY(var(--tabs-indicator-transform)) translateX(0) translateZ(0); - width: $token-border-size-050; + width: variables.$token-border-size-050; } } @@ -89,7 +91,7 @@ width: auto; &-item { - padding: $token-scale-0 $token-scale-600; + padding: variables.$token-scale-0 variables.$token-scale-600; } } } @@ -107,19 +109,19 @@ .osui-tabs__header-item { justify-content: center; - padding: $token-scale-200 $token-scale-400; + padding: variables.$token-scale-200 variables.$token-scale-400; } } .osui-tabs__header__indicator { bottom: 0; - height: $token-border-size-050; + height: variables.$token-border-size-050; transform: translateX(var(--tabs-indicator-transform)) translateY(0) translateZ(0); width: (var(--tabs-indicator-size)); } .osui-tabs__content { - border-top: $token-border-size-025 solid var(--osui-tabs-border-color); + border-top: variables.$token-border-size-025 solid var(--osui-tabs-border-color); margin-top: -1px; } } @@ -186,15 +188,15 @@ align-items: center; background-color: transparent; border: none; - border-radius: $token-border-radius-100; + border-radius: variables.$token-border-radius-100; color: var(--osui-tabs-header-item-color); cursor: pointer; display: inline-flex; height: 100%; position: relative; - min-height: $token-scale-1100; + min-height: variables.$token-scale-1100; text-align: unset; - transition: color $token-transition-time-200 $token-transition-curve-linear; + transition: color variables.$token-transition-time-200 variables.$token-transition-curve-linear; width: 100%; &:hover { @@ -228,7 +230,7 @@ &__indicator { background-color: var(--osui-tabs-indicator-color); position: absolute; - transition: transform $token-transition-time-200 $token-transition-curve-linear; + transition: transform variables.$token-transition-time-200 variables.$token-transition-curve-linear; transform-origin: 0 0; will-change: transform; z-index: var(--layer-local-tier-1); @@ -242,7 +244,7 @@ & { -servicestudio-display: grid; -servicestudio-grid-auto-flow: column; - -servicestudio-gap: $token-scale-200; + -servicestudio-gap: variables.$token-scale-200; } } @@ -262,17 +264,17 @@ &-item { height: 100%; overflow-y: var(--tabs-content-item-overflow); - padding: $token-scale-600 $token-scale-0; + padding: variables.$token-scale-600 variables.$token-scale-0; scroll-snap-align: start; scroll-snap-stop: always; // Service Studio Preview & { -servicestudio-display: block !important; - -servicestudio-margin-bottom: $token-scale-600; + -servicestudio-margin-bottom: variables.$token-scale-600; div:empty { - -servicestudio-padding: $token-scale-600; + -servicestudio-padding: variables.$token-scale-600; } .uieditor-if-branch-widget:has(> div:empty) { @@ -309,7 +311,7 @@ .osui-tabs__header { &-item { justify-content: flex-start; - padding: $token-scale-100 $token-scale-400 $token-scale-100 0; + padding: variables.$token-scale-100 variables.$token-scale-400 variables.$token-scale-100 0; } & > .osui-tabs__header__indicator { @@ -319,7 +321,7 @@ } .osui-tabs__content { - border-left: $token-border-size-025 solid var(--osui-tabs-border-color); + border-left: variables.$token-border-size-025 solid var(--osui-tabs-border-color); margin-left: -1px; border-right: 0; } @@ -330,7 +332,7 @@ grid-column: 1; &-item { - padding: $token-scale-100 0 $token-scale-100 $token-scale-400; + padding: variables.$token-scale-100 0 variables.$token-scale-100 variables.$token-scale-400; } & > .osui-tabs__header__indicator { @@ -340,7 +342,7 @@ } .osui-tabs__content { - border-right: $token-border-size-025 solid var(--osui-tabs-border-color); + border-right: variables.$token-border-size-025 solid var(--osui-tabs-border-color); margin-right: -1px; border-left: 0; } @@ -366,15 +368,15 @@ } &:focus-visible { - box-shadow: inset 0 0 0 $token-border-size-075 - color-mix(in srgb, #{$token-semantics-primary-base} 22%, transparent); + box-shadow: inset 0 0 0 variables.$token-border-size-075 + color-mix(in srgb, #{variables.$token-semantics-primary-base} 22%, transparent); color: var(--color-text); } } &__content-item { &:focus-visible { - box-shadow: 0 0 0 $token-border-size-025 $token-semantics-primary-base inset; + box-shadow: 0 0 0 variables.$token-border-size-025 variables.$token-semantics-primary-base inset; } } } @@ -400,7 +402,7 @@ .osui-tabs__header-item.osui-tabs--is-active:before, .osui-tabs__content-item:focus:before, .osui-tabs__content-item.osui-tabs--is-active:before { - border: $token-border-size-050 solid $token-semantics-primary-base; + border: variables.$token-border-size-050 solid variables.$token-semantics-primary-base; bottom: 0; content: ''; display: block; @@ -413,11 +415,11 @@ .osui-tabs__header-item:focus:before, .osui-tabs__content-item:focus:before { - border-width: $token-border-size-075; + border-width: variables.$token-border-size-075; } .osui-tabs__content-item { - padding: $token-scale-400; + padding: variables.$token-scale-400; } } // Issue on accordion in webkit @@ -490,14 +492,14 @@ html[data-uieditorversion^='1'] .osui-tabs__preview { &--is-active::after { -servicestudio-align-items: center; - -servicestudio-background-color: $token-bg-surface-default; - -servicestudio-border: 1px solid $token-primitives-neutral-300; + -servicestudio-background-color: variables.$token-bg-surface-default; + -servicestudio-border: 1px solid variables.$token-primitives-neutral-300; -servicestudio-content: 'TabsContentItems are currently hidden. Use the toggle to preview them inside Service Studio.'; -servicestudio-display: flex; -servicestudio-justify-content: center; - -servicestudio-font-weight: $token-font-weight-semi-bold; + -servicestudio-font-weight: variables.$token-font-weight-semi-bold; -servicestudio-height: auto; - -servicestudio-padding: $token-scale-200; + -servicestudio-padding: variables.$token-scale-200; -servicestudio-position: absolute; -servicestudio-width: 100%; } diff --git a/src/scss/04-patterns/05-numbers/_badge.scss b/src/scss/04-patterns/05-numbers/_badge.scss index 20034b77ab..5d1458f205 100644 --- a/src/scss/04-patterns/05-numbers/_badge.scss +++ b/src/scss/04-patterns/05-numbers/_badge.scss @@ -1,3 +1,6 @@ +@use '../../00-abstract/index' as *; +@use '../../tokens/variables'; + /* Patterns - Numbers - Badge */ //// /// @group Patterns-Badge @@ -8,37 +11,37 @@ // families read text-extended-*, and cyan/grape read the primitives matching // their background family (no text token exists for them). $osui-badge-lightest-text-colors: ( - 'red': $token-text-danger, - 'orange': $token-text-extended-orange, - 'yellow': $token-text-warning, - 'lime': $token-text-extended-lime, - 'green': $token-text-success, - 'teal': $token-text-extended-teal, - 'cyan': $token-primitives-aqua-900, - 'blue': $token-text-info, - 'indigo': $token-text-extended-indigo, - 'violet': $token-text-extended-violet, - 'grape': $token-primitives-purple-900, - 'pink': $token-text-extended-pink, + 'red': variables.$token-text-danger, + 'orange': variables.$token-text-extended-orange, + 'yellow': variables.$token-text-warning, + 'lime': variables.$token-text-extended-lime, + 'green': variables.$token-text-success, + 'teal': variables.$token-text-extended-teal, + 'cyan': variables.$token-primitives-aqua-900, + 'blue': variables.$token-text-info, + 'indigo': variables.$token-text-extended-indigo, + 'violet': variables.$token-text-extended-violet, + 'grape': variables.$token-primitives-purple-900, + 'pink': variables.$token-text-extended-pink, ); /// .badge { // ─── Component CSS API ───────────────────────────────────────────── --osui-badge-color: var(--color-text-inverse); - --osui-badge-primary-color: #{$token-text-primary}; + --osui-badge-primary-color: #{variables.$token-text-primary}; --osui-badge-on-light-color: var(--color-text); // ─────────────────────────────────────────────────────────────────── align-items: center; color: var(--osui-badge-color); display: inline-flex; - font-weight: $token-font-weight-semi-bold; - height: $token-scale-500; + font-weight: variables.$token-font-weight-semi-bold; + height: variables.$token-scale-500; justify-content: center; line-height: 1; - min-width: $token-scale-500; - padding: $token-scale-0 $token-scale-150; + min-width: variables.$token-scale-500; + padding: variables.$token-scale-0 variables.$token-scale-150; &.background { &-neutral { @@ -48,8 +51,8 @@ $osui-badge-lightest-text-colors: ( &-3, &-4, &-5 { - background-color: $token-bg-neutral-base-default; - color: $token-text-default; + background-color: variables.$token-bg-neutral-base-default; + color: variables.$token-text-default; } &-6, @@ -57,8 +60,8 @@ $osui-badge-lightest-text-colors: ( &-8, &-9, &-10 { - background-color: $token-bg-neutral-bold-default; - color: $token-text-inverse; + background-color: variables.$token-bg-neutral-bold-default; + color: variables.$token-text-inverse; } &-0-lightest, @@ -67,8 +70,8 @@ $osui-badge-lightest-text-colors: ( &-3-lightest, &-4-lightest, &-5-lightest { - background-color: $token-bg-neutral-subtle-default; - color: $token-text-subtle; + background-color: variables.$token-bg-neutral-subtle-default; + color: variables.$token-text-subtle; } &-6-lightest, @@ -76,8 +79,8 @@ $osui-badge-lightest-text-colors: ( &-8-lightest, &-9-lightest, &-10-lightest { - background-color: $token-bg-neutral-base-default; - color: $token-text-default; + background-color: variables.$token-bg-neutral-base-default; + color: variables.$token-text-default; } } @@ -99,37 +102,37 @@ $osui-badge-lightest-text-colors: ( // Semantic colors (primary, danger, success, info, warning) &.background-primary-lightest { - background-color: #{$token-bg-primary-subtle-default}; - color: $token-text-primary; + background-color: #{variables.$token-bg-primary-subtle-default}; + color: variables.$token-text-primary; } &.background-danger-lightest { - background-color: #{$token-bg-danger-subtle-default}; - color: $token-text-danger; + background-color: #{variables.$token-bg-danger-subtle-default}; + color: variables.$token-text-danger; } &.background-success-lightest { - background-color: #{$token-bg-success-subtle-default}; - color: $token-text-success; + background-color: #{variables.$token-bg-success-subtle-default}; + color: variables.$token-text-success; } &.background-info-lightest { - background-color: #{$token-bg-info-subtle-default}; - color: $token-text-info; + background-color: #{variables.$token-bg-info-subtle-default}; + color: variables.$token-text-info; } &.background-warning-lightest { - background-color: #{$token-bg-warning-subtle-default}; - color: $token-text-warning; + background-color: #{variables.$token-bg-warning-subtle-default}; + color: variables.$token-text-warning; } &.background-secondary-lightest { - background-color: #{$token-bg-neutral-base-default}; + background-color: #{variables.$token-bg-neutral-base-default}; color: var(--osui-badge-on-light-color); } &.background-transparent-lightest { - color: $token-text-inverse; + color: variables.$token-text-inverse; } // Extended palette colors (red, orange, yellow, etc.) @@ -149,16 +152,16 @@ $osui-badge-lightest-text-colors: ( } &-small { - font-size: $token-font-size-300; - height: $token-scale-400; - min-width: $token-scale-400; - padding: $token-scale-0 $token-scale-100; + font-size: variables.$token-font-size-300; + height: variables.$token-scale-400; + min-width: variables.$token-scale-400; + padding: variables.$token-scale-0 variables.$token-scale-100; } &-medium { - font-size: $token-font-size-400; - height: $token-scale-700; - min-width: $token-scale-700; + font-size: variables.$token-font-size-400; + height: variables.$token-scale-700; + min-width: variables.$token-scale-700; } span { diff --git a/src/scss/04-patterns/05-numbers/_counter.scss b/src/scss/04-patterns/05-numbers/_counter.scss index 28bfb51a54..930c0817f7 100644 --- a/src/scss/04-patterns/05-numbers/_counter.scss +++ b/src/scss/04-patterns/05-numbers/_counter.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Numbers - Counter */ //// /// @group Patterns-Counter @@ -6,7 +8,7 @@ /// .counter { display: flex; - padding: $token-scale-0 $token-scale-600; + padding: variables.$token-scale-0 variables.$token-scale-600; word-break: keep-all; &.background-transparent { diff --git a/src/scss/04-patterns/05-numbers/_icon-badge.scss b/src/scss/04-patterns/05-numbers/_icon-badge.scss index 64be87dc25..4abb1cf81b 100644 --- a/src/scss/04-patterns/05-numbers/_icon-badge.scss +++ b/src/scss/04-patterns/05-numbers/_icon-badge.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Numbers - Icon Badge */ //// /// @group Patterns-Icon_Badge @@ -6,7 +8,7 @@ /// .icon-badge { // ─── Component CSS API ───────────────────────────────────────────── - --osui-icon-badge-ring-color: #{$token-border-subtlest}; + --osui-icon-badge-ring-color: #{variables.$token-border-subtlest}; --osui-icon-badge-shadow: 0 0 0 1px var(--osui-icon-badge-ring-color); // ─────────────────────────────────────────────────────────────────── @@ -24,11 +26,11 @@ box-shadow: var(--osui-icon-badge-shadow); display: inline-flex; font-size: var(--osui-font-size-200); - font-weight: $token-font-weight-bold; - height: $token-scale-400; + font-weight: variables.$token-font-weight-bold; + height: variables.$token-scale-400; justify-content: center; - min-width: $token-scale-400; - padding: $token-scale-0 $token-scale-100; + min-width: variables.$token-scale-400; + padding: variables.$token-scale-0 variables.$token-scale-100; transform: translate(50%, -50%); white-space: nowrap; @@ -38,7 +40,7 @@ } .icon { - font-size: $token-font-size-550; + font-size: variables.$token-font-size-550; } div:first-child:empty { diff --git a/src/scss/04-patterns/05-numbers/progress/_progressbar.scss b/src/scss/04-patterns/05-numbers/progress/_progressbar.scss index a57f7e7278..87a16e9874 100644 --- a/src/scss/04-patterns/05-numbers/progress/_progressbar.scss +++ b/src/scss/04-patterns/05-numbers/progress/_progressbar.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/variables"; + /* Patterns - Numbers - ProgressBar */ //// /// @group Patterns-ProgressBar @@ -12,7 +14,7 @@ position: relative; & { - -servicestudio-min-height: var(--thickness, #{$token-scale-200}); + -servicestudio-min-height: var(--thickness, #{variables.$token-scale-200}); } &__container { @@ -20,7 +22,7 @@ position: relative; & { - -servicestudio-min-height: var(--thickness, #{$token-scale-200}); + -servicestudio-min-height: var(--thickness, #{variables.$token-scale-200}); } &.animate { @@ -45,7 +47,7 @@ right: 0; & { - -servicestudio-height: var(--thickness, #{$token-scale-200}); + -servicestudio-height: var(--thickness, #{variables.$token-scale-200}); } &:after, @@ -58,16 +60,16 @@ top: 0; & { - -servicestudio-border-radius: var(--shape, $token-border-radius-full); + -servicestudio-border-radius: var(--shape, variables.$token-border-radius-full); } } &:after { - background: var(--trail-color, #{$token-bg-neutral-subtle-default}); + background: var(--trail-color, #{variables.$token-bg-neutral-subtle-default}); width: 100%; & { - -servicestudio-background: var(--trail-color, #{$token-bg-neutral-subtle-default}); + -servicestudio-background: var(--trail-color, #{variables.$token-bg-neutral-subtle-default}); } } @@ -77,7 +79,7 @@ z-index: var(--layer-local-tier-1); & { - -servicestudio-background: var(--progress-color, $token-semantics-primary-base); + -servicestudio-background: var(--progress-color, variables.$token-semantics-primary-base); -servicestudio-width: var(--progress-value, 50%); } } @@ -85,7 +87,7 @@ &__content { left: 0; - padding: $token-scale-0 $token-scale-200; + padding: variables.$token-scale-0 variables.$token-scale-200; position: absolute; top: 50%; transform: translateY(-50%); @@ -118,14 +120,14 @@ } &__value { - border: $token-border-size-050 solid var(--color-border-input); + border: variables.$token-border-size-050 solid var(--color-border-input); height: calc(2 * var(--thickness)); &:before, &:after { - border: $token-border-size-050 solid var(--color-border-input); - top: calc(-1 * $token-border-size-050); - left: calc(-1 * $token-border-size-050); + border: variables.$token-border-size-050 solid var(--color-border-input); + top: calc(-1 * variables.$token-border-size-050); + left: calc(-1 * variables.$token-border-size-050); } } } diff --git a/src/scss/04-patterns/05-numbers/progress/_progresscircle.scss b/src/scss/04-patterns/05-numbers/progress/_progresscircle.scss index 5c8b106932..14233c20bf 100644 --- a/src/scss/04-patterns/05-numbers/progress/_progresscircle.scss +++ b/src/scss/04-patterns/05-numbers/progress/_progresscircle.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/variables"; + /* Patterns - Numbers - ProgressCircle */ //// /// @group Patterns-ProgressCircle @@ -43,7 +45,7 @@ } &__progress-path { - -servicestudio-stroke: var(--progress-color, #{$token-semantics-primary-base}); + -servicestudio-stroke: var(--progress-color, #{variables.$token-semantics-primary-base}); stroke: var(--progress-circle-gradient-url, var(--progress-color)); stroke-dasharray: var(--stroke-dasharray); stroke-dashoffset: var(--stroke-dashoffset); @@ -63,7 +65,7 @@ } &__trail-path { - stroke: var(--trail-color, #{$token-primitives-neutral-300}); + stroke: var(--trail-color, #{variables.$token-primitives-neutral-300}); } } diff --git a/src/scss/04-patterns/05-numbers/rating/_rating.scss b/src/scss/04-patterns/05-numbers/rating/_rating.scss index 0b707df883..59dcaef335 100644 --- a/src/scss/04-patterns/05-numbers/rating/_rating.scss +++ b/src/scss/04-patterns/05-numbers/rating/_rating.scss @@ -1,3 +1,6 @@ +@use '../../../00-abstract/index' as *; +@use "../../../tokens/variables"; + /* Patterns - Numbers - Rating */ //// /// @group Patterns-Rating @@ -12,9 +15,9 @@ // Internal colour vars — overrideable per-instance --token-rating-filled-color: var(--color-primary); - --token-rating-empty-color: #{$token-bg-neutral-base-default}; + --token-rating-empty-color: #{variables.$token-bg-neutral-base-default}; - --rating-size: #{$token-scale-400}; // 16px default + --rating-size: #{variables.$token-scale-400}; // 16px default position: relative; display: inline-flex; @@ -28,15 +31,15 @@ } &.rating-small { - --rating-size: #{$token-scale-300}; // design-spec: 12px + --rating-size: #{variables.$token-scale-300}; // design-spec: 12px .rating-item { - padding-right: calc(var(--rating-size) + #{$token-scale-100}); + padding-right: calc(var(--rating-size) + #{variables.$token-scale-100}); } } &.rating-medium { - --rating-size: #{$token-scale-600}; + --rating-size: #{variables.$token-scale-600}; } &.is-edit { @@ -83,7 +86,7 @@ display: inline-block; height: var(--rating-size); // Padding is used to avoid flicks on hover due to rating-items gap - padding-right: calc(var(--rating-size) + #{$token-scale-200}); + padding-right: calc(var(--rating-size) + #{variables.$token-scale-200}); position: relative; width: var(--rating-size); @@ -91,10 +94,10 @@ &-half, &-empty { left: 0; - line-height: $token-font-line-height-full; + line-height: variables.$token-font-line-height-full; position: absolute; top: 0; - transition: opacity $token-transition-time-100 $token-transition-curve-base; + transition: opacity variables.$token-transition-time-100 variables.$token-transition-curve-base; .icon { vertical-align: middle; @@ -102,7 +105,7 @@ // Service Studio Preview & { - -servicestudio-margin-right: #{$token-scale-200}; + -servicestudio-margin-right: #{variables.$token-scale-200}; -servicestudio-min-height: 24px; -servicestudio-min-width: 24px; -servicestudio-opacity: 1 !important; @@ -152,8 +155,8 @@ &:first-of-type { + .rating-item { background: transparent; - box-shadow: 0 0 0 $token-border-size-075 - color-mix(in srgb, #{$token-semantics-primary-base} 22%, transparent); + box-shadow: 0 0 0 variables.$token-border-size-075 + color-mix(in srgb, #{variables.$token-semantics-primary-base} 22%, transparent); height: 100%; left: 0; opacity: 0; @@ -284,7 +287,7 @@ .is-rtl { .rating { .rating-item { - padding-left: calc(var(--rating-size) + #{$token-scale-200}); + padding-left: calc(var(--rating-size) + #{variables.$token-scale-200}); padding-right: 0; transform: scaleX(-1); } @@ -308,8 +311,8 @@ &:not(.is-half) input:focus + .rating-item .rating-item-filled { &, * { - box-shadow: 0 0 0 $token-border-size-075 - color-mix(in srgb, #{$token-semantics-primary-base} 22%, transparent); + box-shadow: 0 0 0 variables.$token-border-size-075 + color-mix(in srgb, #{variables.$token-semantics-primary-base} 22%, transparent); } } } diff --git a/src/scss/04-patterns/06-utilities/_list-updating.scss b/src/scss/04-patterns/06-utilities/_list-updating.scss index 68f73d6b85..0e36883516 100644 --- a/src/scss/04-patterns/06-utilities/_list-updating.scss +++ b/src/scss/04-patterns/06-utilities/_list-updating.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Utilities - List Updating */ //// /// @group Utilities-List_Updating @@ -5,24 +7,24 @@ /// .list-updating { - height: $token-scale-1000; - margin-top: $token-scale-600; + height: variables.$token-scale-1000; + margin-top: variables.$token-scale-600; position: relative; &:before { animation: - spin $token-transition-time-1000 infinite $token-transition-curve-linear, - fade $token-transition-time-300 $token-transition-curve-expressive; + spin variables.$token-transition-time-1000 infinite variables.$token-transition-curve-linear, + fade variables.$token-transition-time-300 variables.$token-transition-curve-expressive; border: 5px solid var(--color-border-input); border-radius: 50%; - border-top-color: $token-primitives-neutral-700; + border-top-color: variables.$token-primitives-neutral-700; box-sizing: border-box; content: ''; - height: $token-scale-1000; + height: variables.$token-scale-1000; left: 50%; margin-left: -20px; position: absolute; - width: $token-scale-1000; + width: variables.$token-scale-1000; // Service Studio Preview & { diff --git a/src/scss/04-patterns/06-utilities/_margin-container.scss b/src/scss/04-patterns/06-utilities/_margin-container.scss index 3bd89aae3f..ae85c8d526 100644 --- a/src/scss/04-patterns/06-utilities/_margin-container.scss +++ b/src/scss/04-patterns/06-utilities/_margin-container.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Utilities - Margin Container */ //// /// @group Patterns-Margin_Container @@ -5,13 +7,13 @@ /// .margin-container { - padding: $token-scale-600; + padding: variables.$token-scale-600; } /// .layout-native { .margin-container { - padding: $token-scale-800; + padding: variables.$token-scale-800; } } @@ -20,7 +22,7 @@ .tablet { .layout-native { .margin-container { - padding: $token-scale-600; + padding: variables.$token-scale-600; } } } @@ -29,7 +31,7 @@ .phone { .layout-native { .margin-container { - padding: $token-scale-400; + padding: variables.$token-scale-400; } } } diff --git a/src/scss/04-patterns/06-utilities/_provider-login-button.scss b/src/scss/04-patterns/06-utilities/_provider-login-button.scss index 84eea8894e..332d623366 100644 --- a/src/scss/04-patterns/06-utilities/_provider-login-button.scss +++ b/src/scss/04-patterns/06-utilities/_provider-login-button.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /*! Patterns - Utilities - Provider Login Button */ //// /// @group Utilities-Provider_Login_Button @@ -7,7 +9,7 @@ // ─── Component CSS API ───────────────────────────────────────────── --osui-provider-login-button-background: var(--color-background-surface); --osui-provider-login-button-border-color: var(--color-border-input); - --osui-provider-login-button-color: #{$token-primitives-neutral-700}; + --osui-provider-login-button-color: #{variables.$token-primitives-neutral-700}; // ─────────────────────────────────────────────────────────────────── background: var(--osui-provider-login-button-background); @@ -38,7 +40,7 @@ } } &.soft { - border-radius: $token-border-radius-100; + border-radius: variables.$token-border-radius-100; } &.rounded { border-radius: var(--border-radius-rounded); @@ -46,8 +48,8 @@ .btn-provider-login { &-logo { border-radius: 50%; - height: $token-scale-500; - width: $token-scale-500; + height: variables.$token-scale-500; + width: variables.$token-scale-500; } &-text { color: var(--osui-provider-login-button-color); @@ -63,7 +65,7 @@ width: 50px; &.btn- { &small { - width: $token-scale-1000; + width: variables.$token-scale-1000; } &large { width: 55px; diff --git a/src/scss/04-patterns/06-utilities/_pull-to-refresh.scss b/src/scss/04-patterns/06-utilities/_pull-to-refresh.scss index 5c71f5f394..92818acb5f 100644 --- a/src/scss/04-patterns/06-utilities/_pull-to-refresh.scss +++ b/src/scss/04-patterns/06-utilities/_pull-to-refresh.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Utilities - Pull to Refresh */ //// /// @group Utilities-Pull_To_Refresh @@ -6,9 +8,9 @@ /// .pull-to-refresh { color: var(--color-text-disabled); - font-size: $token-font-size-650; + font-size: variables.$token-font-size-650; left: 0; - padding: $token-scale-200; + padding: variables.$token-scale-200; position: absolute; text-align: center; width: 100%; @@ -24,7 +26,7 @@ } .genericon { - transition: all $token-transition-time-300 $token-transition-curve-expressive; + transition: all variables.$token-transition-time-300 variables.$token-transition-curve-expressive; } } @@ -34,7 +36,7 @@ &-reset { .content, .pull-to-refresh { - transition: all $token-transition-time-300 $token-transition-curve-expressive; + transition: all variables.$token-transition-time-300 variables.$token-transition-curve-expressive; } .pull-to-refresh { diff --git a/src/scss/04-patterns/06-utilities/_separator.scss b/src/scss/04-patterns/06-utilities/_separator.scss index cfbac90328..11c4301913 100644 --- a/src/scss/04-patterns/06-utilities/_separator.scss +++ b/src/scss/04-patterns/06-utilities/_separator.scss @@ -1,3 +1,5 @@ +@use "../../tokens/variables"; + /* Patterns - Utilities - Separator */ //// /// @group Patterns-Separator @@ -14,7 +16,7 @@ &-vertical { display: inline-block; height: 100%; - min-height: $token-scale-500; + min-height: variables.$token-scale-500; min-width: 1px; width: 1px; } diff --git a/src/scss/05-useful/_a11y.scss b/src/scss/05-useful/_a11y.scss index e7f3eca342..b2317955f2 100644 --- a/src/scss/05-useful/_a11y.scss +++ b/src/scss/05-useful/_a11y.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Usefull - a11y (Accessibility) */ //// /// @group Patterns-a11y @@ -31,9 +33,9 @@ /* Skip-nav link used on Accessibility*/ /// .skip-nav { - left: $token-scale-1000; + left: variables.$token-scale-1000; opacity: 0; - padding: $token-scale-200 $token-scale-400; + padding: variables.$token-scale-200 variables.$token-scale-400; pointer-events: none; position: absolute; text-transform: uppercase; diff --git a/src/scss/05-useful/_border-radius.scss b/src/scss/05-useful/_border-radius.scss index 9268420f03..dcf9d36f4b 100644 --- a/src/scss/05-useful/_border-radius.scss +++ b/src/scss/05-useful/_border-radius.scss @@ -1,3 +1,7 @@ +@use "sass:map"; +@use '../00-abstract/index' as *; +@use "../tokens/variables"; + /* Usefull - Border Radius */ //// /// @group UsefullClasses-Border_Radius @@ -5,16 +9,16 @@ // Maps old border-radius names to token SCSS variables (or plain CSS values) $osui-border-radius-token-vars: ( - 'none': $token-border-radius-0, - 'soft': $token-border-radius-100, - 'rounded': $token-border-radius-full, + 'none': variables.$token-border-radius-0, + 'soft': variables.$token-border-radius-100, + 'rounded': variables.$token-border-radius-full, 'circle': 50% ); /// .border-radius { @each $type, $value in $osui-border-radius-types { - $token: map-get($osui-border-radius-token-vars, $type); + $token: map.get($osui-border-radius-token-vars, $type); // Generated - Eg: .border-radius-none &-#{$type} { border-radius: #{$token}; diff --git a/src/scss/05-useful/_border-size.scss b/src/scss/05-useful/_border-size.scss index 038b2d51aa..557e0c98cb 100644 --- a/src/scss/05-useful/_border-size.scss +++ b/src/scss/05-useful/_border-size.scss @@ -1,3 +1,7 @@ +@use "sass:map"; +@use '../00-abstract/index' as *; +@use "../tokens/variables"; + /* Usefull - Border Size */ //// /// @group UsefullClasses-Border_Size @@ -5,10 +9,10 @@ // Maps old border-size names to token SCSS variables $osui-border-size-token-vars: ( - 'none': $token-border-size-0, - 's': $token-border-size-025, - 'm': $token-border-size-050, - 'l': $token-border-size-075 + 'none': variables.$token-border-size-0, + 's': variables.$token-border-size-025, + 'm': variables.$token-border-size-050, + 'l': variables.$token-border-size-075 ); /// @@ -18,9 +22,9 @@ $osui-border-size-token-vars: ( // Generated - Eg: .border-size-none &-#{$type} { @if $type == 'none' { - border-width: #{map-get($osui-border-size-token-vars, $type)}; + border-width: #{map.get($osui-border-size-token-vars, $type)}; } @else { - border: #{map-get($osui-border-size-token-vars, $type)} solid currentColor; + border: #{map.get($osui-border-size-token-vars, $type)} solid currentColor; } } } @@ -33,7 +37,7 @@ $osui-border-size-token-vars: ( // Generated - Eg: .border-top-s &-#{$osui-box-side}-#{$type}:not(.columns), &-#{$osui-box-side}-#{$type}.columns > .columns-item:not(:last-child) { - border-#{$osui-box-side}: #{map-get($osui-border-size-token-vars, $type)} solid currentColor; + border-#{$osui-box-side}: #{map.get($osui-border-size-token-vars, $type)} solid currentColor; } } } diff --git a/src/scss/05-useful/_colors-brand.scss b/src/scss/05-useful/_colors-brand.scss index f149fea33b..ab9022f7d3 100644 --- a/src/scss/05-useful/_colors-brand.scss +++ b/src/scss/05-useful/_colors-brand.scss @@ -1,3 +1,5 @@ +@use '../tokens/variables'; + /* Usefull - Colors Brand */ //// /// @group UsefullClasses-Colors_Brand @@ -9,7 +11,7 @@ background-color: var(--color-primary); &-lightest { - background-color: $token-bg-surface-default; // TODO review need to theme layer variable for lightest + background-color: variables.$token-bg-surface-default; // TODO review need to theme layer variable for lightest } } @@ -17,7 +19,7 @@ background-color: var(--color-secondary); &-lightest { - background-color: $token-bg-surface-default; + background-color: variables.$token-bg-surface-default; } } } @@ -27,7 +29,7 @@ &-primary { &, &-darker { - color: $token-semantics-primary-base; + color: variables.$token-semantics-primary-base; } } diff --git a/src/scss/05-useful/_colors-neutral.scss b/src/scss/05-useful/_colors-neutral.scss index 53fe41c457..3dbf90de59 100644 --- a/src/scss/05-useful/_colors-neutral.scss +++ b/src/scss/05-useful/_colors-neutral.scss @@ -1,3 +1,6 @@ +@use '../00-abstract/index' as *; +@use "../tokens/variables"; + /* Usefull - Colors Neutral */ //// /// @group UsefullClasses-Colors_Neutral @@ -16,7 +19,7 @@ background-color: #{$value}; &-lightest { - background-color: $token-bg-surface-default; + background-color: variables.$token-bg-surface-default; } } } diff --git a/src/scss/05-useful/_colors-palette.scss b/src/scss/05-useful/_colors-palette.scss index 6aa7031abe..bf9fc2ad7b 100644 --- a/src/scss/05-useful/_colors-palette.scss +++ b/src/scss/05-useful/_colors-palette.scss @@ -1,3 +1,5 @@ +@use '../00-abstract/index' as *; + /* Usefull - Colors Palette */ //// /// @group UsefullClasses-Colors_Pallete diff --git a/src/scss/05-useful/_colors-semantic.scss b/src/scss/05-useful/_colors-semantic.scss index 626d85566b..08b0018ecf 100644 --- a/src/scss/05-useful/_colors-semantic.scss +++ b/src/scss/05-useful/_colors-semantic.scss @@ -1,3 +1,5 @@ +@use '../00-abstract/index' as *; + /* Usefull - Colors Semantic */ //// /// @group UsefullClasses-Colors_Semantic diff --git a/src/scss/05-useful/_display-flex.scss b/src/scss/05-useful/_display-flex.scss index d89ef3cde8..0178449210 100644 --- a/src/scss/05-useful/_display-flex.scss +++ b/src/scss/05-useful/_display-flex.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Usefull - Display Flex */ //// /// @group UsefullClasses-Display_Flex @@ -78,72 +80,72 @@ .gap { &-xs { - gap: $token-scale-100; + gap: variables.$token-scale-100; } &-s { - gap: $token-scale-200; + gap: variables.$token-scale-200; } &-base { - gap: $token-scale-400; + gap: variables.$token-scale-400; } &-m { - gap: $token-scale-600; + gap: variables.$token-scale-600; } &-l { - gap: $token-scale-800; + gap: variables.$token-scale-800; } &-xl { - gap: $token-scale-1000; + gap: variables.$token-scale-1000; } &-xxl { - gap: $token-scale-1200; + gap: variables.$token-scale-1200; } } .row-gap { &-xs { - row-gap: $token-scale-100; + row-gap: variables.$token-scale-100; } &-s { - row-gap: $token-scale-200; + row-gap: variables.$token-scale-200; } &-base { - row-gap: $token-scale-400; + row-gap: variables.$token-scale-400; } &-m { - row-gap: $token-scale-600; + row-gap: variables.$token-scale-600; } &-l { - row-gap: $token-scale-800; + row-gap: variables.$token-scale-800; } &-xl { - row-gap: $token-scale-1000; + row-gap: variables.$token-scale-1000; } &-xxl { - row-gap: $token-scale-1200; + row-gap: variables.$token-scale-1200; } } .column-gap { &-xs { - column-gap: $token-scale-100; + column-gap: variables.$token-scale-100; } &-s { - column-gap: $token-scale-200; + column-gap: variables.$token-scale-200; } &-base { - column-gap: $token-scale-400; + column-gap: variables.$token-scale-400; } &-m { - column-gap: $token-scale-600; + column-gap: variables.$token-scale-600; } &-l { - column-gap: $token-scale-800; + column-gap: variables.$token-scale-800; } &-xl { - column-gap: $token-scale-1000; + column-gap: variables.$token-scale-1000; } &-xxl { - column-gap: $token-scale-1200; + column-gap: variables.$token-scale-1200; } } diff --git a/src/scss/05-useful/_images.scss b/src/scss/05-useful/_images.scss index cd8a7268d8..68af6d37fd 100644 --- a/src/scss/05-useful/_images.scss +++ b/src/scss/05-useful/_images.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Usefull - Images */ //// /// @group UsefullClasses-Image @@ -22,8 +24,8 @@ img { } &.thumbnail { - background-color: $token-bg-surface-default; - border: $token-border-size-025 solid var(--color-border); - padding: $token-scale-100; + background-color: variables.$token-bg-surface-default; + border: variables.$token-border-size-025 solid var(--color-border); + padding: variables.$token-scale-100; } } diff --git a/src/scss/05-useful/_shadow.scss b/src/scss/05-useful/_shadow.scss index 2b72ec0286..69c126d61a 100644 --- a/src/scss/05-useful/_shadow.scss +++ b/src/scss/05-useful/_shadow.scss @@ -1,3 +1,7 @@ +@use "sass:map"; +@use '../00-abstract/index' as *; +@use "../tokens/variables"; + /* Usefull - Shadow */ //// /// @group UsefullClasses-Shadow @@ -6,17 +10,17 @@ // Maps old shadow names to token SCSS variables (null = no box-shadow / 'none') $osui-shadow-token-vars: ( 'none': null, - 'xs': $token-elevation-1, - 's': $token-elevation-1, - 'm': $token-elevation-2, - 'l': $token-elevation-3, - 'xl': $token-elevation-4 + 'xs': variables.$token-elevation-1, + 's': variables.$token-elevation-1, + 'm': variables.$token-elevation-2, + 'l': variables.$token-elevation-3, + 'xl': variables.$token-elevation-4 ); /// .shadow { @each $type, $value in $osui-shadow-types { - $token: map-get($osui-shadow-token-vars, $type); + $token: map.get($osui-shadow-token-vars, $type); &-#{$type} { @if $token == null { box-shadow: none; diff --git a/src/scss/05-useful/_space-margin.scss b/src/scss/05-useful/_space-margin.scss index cd6989c713..82c2aa0bf3 100644 --- a/src/scss/05-useful/_space-margin.scss +++ b/src/scss/05-useful/_space-margin.scss @@ -1,3 +1,7 @@ +@use "sass:map"; +@use '../00-abstract/index' as *; +@use "../tokens/variables"; + /* Usefull - Margin */ //// /// @group UsefullClasses-Margin @@ -7,23 +11,23 @@ .margin { @each $type, $value in $osui-sizes { &-#{$type} { - margin: #{map-get($osui-space-token-vars, $type)}; + margin: #{map.get($osui-space-token-vars, $type)}; } @each $osui-box-side in $osui-box-sides { &-#{$osui-box-side}-#{$type} { - margin-#{$osui-box-side}: #{map-get($osui-space-token-vars, $type)}; + margin-#{$osui-box-side}: #{map.get($osui-space-token-vars, $type)}; } } &-x-#{$type} { - margin-left: #{map-get($osui-space-token-vars, $type)}; - margin-right: #{map-get($osui-space-token-vars, $type)}; + margin-left: #{map.get($osui-space-token-vars, $type)}; + margin-right: #{map.get($osui-space-token-vars, $type)}; } &-y-#{$type} { - margin-bottom: #{map-get($osui-space-token-vars, $type)}; - margin-top: #{map-get($osui-space-token-vars, $type)}; + margin-bottom: #{map.get($osui-space-token-vars, $type)}; + margin-top: #{map.get($osui-space-token-vars, $type)}; } } @@ -38,13 +42,13 @@ @each $type, $value in $osui-sizes { .margin { &-right-#{$type} { - margin-left: #{map-get($osui-space-token-vars, $type)}; - margin-right: $token-scale-0; + margin-left: #{map.get($osui-space-token-vars, $type)}; + margin-right: variables.$token-scale-0; } &-left-#{$type} { - margin-left: $token-scale-0; - margin-right: #{map-get($osui-space-token-vars, $type)}; + margin-left: variables.$token-scale-0; + margin-right: #{map.get($osui-space-token-vars, $type)}; } } } diff --git a/src/scss/05-useful/_space-padding.scss b/src/scss/05-useful/_space-padding.scss index 622299a5e7..7335c81f6f 100644 --- a/src/scss/05-useful/_space-padding.scss +++ b/src/scss/05-useful/_space-padding.scss @@ -1,3 +1,7 @@ +@use "sass:map"; +@use '../00-abstract/index' as *; +@use "../tokens/variables"; + /* Usefull - Padding */ //// /// @group UsefullClasses-Padding @@ -7,23 +11,23 @@ .padding { @each $type, $value in $osui-sizes { &-#{$type} { - padding: #{map-get($osui-space-token-vars, $type)}; + padding: #{map.get($osui-space-token-vars, $type)}; } @each $osui-box-side in $osui-box-sides { &-#{$osui-box-side}-#{$type} { - padding-#{$osui-box-side}: #{map-get($osui-space-token-vars, $type)}; + padding-#{$osui-box-side}: #{map.get($osui-space-token-vars, $type)}; } } &-x-#{$type} { - padding-left: #{map-get($osui-space-token-vars, $type)}; - padding-right: #{map-get($osui-space-token-vars, $type)}; + padding-left: #{map.get($osui-space-token-vars, $type)}; + padding-right: #{map.get($osui-space-token-vars, $type)}; } &-y-#{$type} { - padding-bottom: #{map-get($osui-space-token-vars, $type)}; - padding-top: #{map-get($osui-space-token-vars, $type)}; + padding-bottom: #{map.get($osui-space-token-vars, $type)}; + padding-top: #{map.get($osui-space-token-vars, $type)}; } } @@ -38,13 +42,13 @@ @each $type, $value in $osui-sizes { .padding { &-right-#{$type} { - padding-left: #{map-get($osui-space-token-vars, $type)}; - padding-right: $token-scale-0; + padding-left: #{map.get($osui-space-token-vars, $type)}; + padding-right: variables.$token-scale-0; } &-left-#{$type} { - padding-left: $token-scale-0; - padding-right: #{map-get($osui-space-token-vars, $type)}; + padding-left: variables.$token-scale-0; + padding-right: #{map.get($osui-space-token-vars, $type)}; } } } diff --git a/src/scss/05-useful/_typography.scss b/src/scss/05-useful/_typography.scss index facd04c3bc..cc872c7547 100644 --- a/src/scss/05-useful/_typography.scss +++ b/src/scss/05-useful/_typography.scss @@ -1,3 +1,7 @@ +@use "sass:map"; +@use '../00-abstract/index' as *; +@use "../tokens/variables"; + /* Usefull - Typography */ //// /// @group UsefullClasses-Typography @@ -5,18 +9,18 @@ // Maps old typography size names to token SCSS variables $osui-typography-size-token-vars: ( - 'base': $token-font-size-400, - 's': $token-font-size-350, - 'xs': $token-font-size-300, - 'label': $token-font-size-275 + 'base': variables.$token-font-size-400, + 's': variables.$token-font-size-350, + 'xs': variables.$token-font-size-300, + 'label': variables.$token-font-size-275 ); // Maps old typography weight names to token SCSS variables $osui-typography-weight-token-vars: ( - 'light': $token-font-weight-light, - 'regular': $token-font-weight-regular, - 'semi-bold': $token-font-weight-semi-bold, - 'bold': $token-font-weight-bold + 'light': variables.$token-font-weight-light, + 'regular': variables.$token-font-weight-regular, + 'semi-bold': variables.$token-font-weight-semi-bold, + 'bold': variables.$token-font-weight-bold ); /// @@ -25,7 +29,7 @@ $osui-typography-weight-token-vars: ( @each $type, $value in $osui-typography-sizes { @if ($type != 'display') { &-#{$type} { - font-size: #{map-get($osui-typography-size-token-vars, $type)}; + font-size: #{map.get($osui-typography-size-token-vars, $type)}; } } } @@ -35,7 +39,7 @@ $osui-typography-weight-token-vars: ( & { @each $type, $value in $osui-typography-weight { &-#{$type} { - font-weight: #{map-get($osui-typography-weight-token-vars, $type)}; + font-weight: #{map.get($osui-typography-weight-token-vars, $type)}; } } } @@ -43,7 +47,7 @@ $osui-typography-weight-token-vars: ( /// .bold { - font-weight: $token-font-weight-bold; + font-weight: variables.$token-font-weight-bold; } /// diff --git a/src/scss/07-keyframes/_pull-to-refresh.scss b/src/scss/07-keyframes/_pull-to-refresh.scss index 838c8bfb2d..e834ded1ce 100644 --- a/src/scss/07-keyframes/_pull-to-refresh.scss +++ b/src/scss/07-keyframes/_pull-to-refresh.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* KeyFrames - Pull To Refresh */ //// /// @group KeyFrames-Pull_To_Refresh @@ -10,7 +12,7 @@ transform: translateY(0) scale(0.3); } 100% { - background-color: $token-bg-surface-default; + background-color: variables.$token-bg-surface-default; opacity: 1; transform: scale(1); } diff --git a/src/scss/08-servicestudio-preview/_servicestudiopreview.scss b/src/scss/08-servicestudio-preview/_servicestudiopreview.scss index 8da83dbe3d..1c79cebbc5 100644 --- a/src/scss/08-servicestudio-preview/_servicestudiopreview.scss +++ b/src/scss/08-servicestudio-preview/_servicestudiopreview.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + //// /// @group ServiceStudio_Preview /* @@ -17,7 +19,7 @@ body > .app-menu-content { & .app-menu-links { -servicestudio-align-items: flex-start; - -servicestudio-padding: $token-scale-0; + -servicestudio-padding: variables.$token-scale-0; -servicestudio-width: 100% !important; } } @@ -26,8 +28,8 @@ body > .app-menu-content { .phone { .app-menu-links { a { - -servicestudio-margin-left: $token-scale-0; - -servicestudio-padding: $token-scale-200 $token-scale-600; + -servicestudio-margin-left: variables.$token-scale-0; + -servicestudio-padding: variables.$token-scale-200 variables.$token-scale-600; -servicestudio-width: 100%; } } @@ -37,7 +39,7 @@ body > .app-menu-content { html[data-uieditorversion^='1'] { body { &:not(.phone):not(.tablet) .layout-side aside { - -servicestudio-background-color: $token-bg-surface-default; + -servicestudio-background-color: variables.$token-bg-surface-default; -servicestudio-bottom: 0; -servicestudio-position: fixed; -servicestudio-top: 0; diff --git a/src/scss/08-servicestudio-preview/deprecated-preview.scss b/src/scss/08-servicestudio-preview/deprecated-preview.scss index 3e2173f096..ed2e1589d0 100644 --- a/src/scss/08-servicestudio-preview/deprecated-preview.scss +++ b/src/scss/08-servicestudio-preview/deprecated-preview.scss @@ -1,3 +1,5 @@ +@use "../tokens/variables"; + /* Deprecated block preview */ /* Notes: @@ -10,10 +12,10 @@ display: none; -servicestudio-background: #fff1dc; -servicestudio-background: #fef5e5; - -servicestudio-border-radius: $token-border-radius-100; - -servicestudio-color: $token-text-default; + -servicestudio-border-radius: variables.$token-border-radius-100; + -servicestudio-color: variables.$token-text-default; -servicestudio-content: '⚠ DEPRECATED'; - -servicestudio-font-weight: $token-font-weight-semi-bold; + -servicestudio-font-weight: variables.$token-font-weight-semi-bold; -servicestudio-display: block; -servicestudio-font-size: 9px; -servicestudio-line-height: 8px; diff --git a/src/scss/ODC.OutSystemsUI.scss b/src/scss/ODC.OutSystemsUI.scss index 6d883984ab..a552a77c15 100644 --- a/src/scss/ODC.OutSystemsUI.scss +++ b/src/scss/ODC.OutSystemsUI.scss @@ -1,3 +1,5 @@ +@use '00-abstract/index' as *; + /* =============================================================================== IMPORTANT NOTE: • This file is generated automatically through npm scripts: @@ -184,357 +186,347 @@ Section Index: 10. Service Studio Preview */ -/* =============================================================================== -SCSS Setup variables -=============================================================================== */ -@import '00-abstract/setup-global-vars'; - -/* =============================================================================== -Functions & Mixins -=============================================================================== */ -@import '00-abstract/mixins'; - /*! ============================================================================== 0. Root - CSS Variables =============================================================================== */ -@import '01-foundations/root'; +@use '01-foundations/root' as *; /*! 0.2. Icon library */ -@import '01-foundations/icon-library-odc'; +@use '01-foundations/icon-library-odc' as *; /*! ============================================================================== 1. Resets =============================================================================== */ -@import '01-foundations/resets'; +@use '01-foundations/resets' as *; /*! 1.2. Dark theme (opt-in via .theme-dark class) */ -@import '01-foundations/theme-dark'; +@use '01-foundations/theme-dark' as *; /*! ============================================================================== 2. HTML Elements =============================================================================== */ /*! 2.1. Links */ -@import '01-foundations/html-elements-link'; +@use '01-foundations/html-elements-link' as *; /*! 2.2. Images */ -@import '01-foundations/html-elements-img'; +@use '01-foundations/html-elements-img' as *; /*! 2.3. Headings */ -@import '01-foundations/html-elements-headings'; +@use '01-foundations/html-elements-headings' as *; /*! ============================================================================== 3. Page Layout =============================================================================== */ /*! 3.1. Layout */ -@import '02-layout/layout'; +@use '02-layout/layout' as *; /*! 3.2. Header */ -@import '02-layout/header'; +@use '02-layout/header' as *; /*! 3.3. Layout Native - Header */ -@import '02-layout/header-layout-native'; +@use '02-layout/header-layout-native' as *; /*! 3.4. Layout Side - Header */ -@import '02-layout/header-layout-side'; +@use '02-layout/header-layout-side' as *; /*! 3.5. Menu */ -@import '02-layout/menu'; +@use '02-layout/menu' as *; /*! 3.6. Layout Native - Menu */ -@import '02-layout/menu-layout-native'; +@use '02-layout/menu-layout-native' as *; /*! 3.7. Layout Side - Menu */ -@import '02-layout/menu-layout-side'; +@use '02-layout/menu-layout-side' as *; /*! 3.8. Menu - Header Logo */ -@import '02-layout/menu-header-logo'; +@use '02-layout/menu-header-logo' as *; /*! 3.9. Menu - App Menu Link */ -@import '02-layout/menu-app-menu-links'; +@use '02-layout/menu-app-menu-links' as *; /*! 3.10. Menu - App Login Info */ -@import '02-layout/menu-app-login-info'; +@use '02-layout/menu-app-login-info' as *; /*! 3.11. Content */ -@import '02-layout/content'; +@use '02-layout/content' as *; /*! 3.12. ThemeGrid_Container */ -@import '02-layout/themegrid-container'; +@use '02-layout/themegrid-container' as *; /*! 3.13. Section */ -@import '02-layout/section'; +@use '02-layout/section' as *; /*! 3.14. Login */ -@import '02-layout/login'; +@use '02-layout/login' as *; /*! 3.15. iOS Scroll Bounce */ -@import '02-layout/ios-bounce'; +@use '02-layout/ios-bounce' as *; /*! ============================================================================== 4. Widgets =============================================================================== */ /*! 4.1. Inputs and TextAreas */ -@import '03-widgets/inputs-and-textareas'; +@use '03-widgets/inputs-and-textareas' as *; /*! 4.2. Switch */ -@import '03-widgets/switch'; +@use '03-widgets/switch' as *; /*! 4.3. Checkbox */ -@import '03-widgets/checkbox'; +@use '03-widgets/checkbox' as *; /*! 4.4. Dropdown */ -@import '03-widgets/dropdown'; +@use '03-widgets/dropdown' as *; /*! 4.5. Button */ -@import '03-widgets/btn'; +@use '03-widgets/btn' as *; /*! 4.6. List */ -@import '03-widgets/list'; +@use '03-widgets/list' as *; /*! 4.7. List Item */ -@import '03-widgets/list-item'; +@use '03-widgets/list-item' as *; /*! 4.8. Table */ -@import '03-widgets/table'; +@use '03-widgets/table' as *; /*! 4.9. Table - Bulk Actions */ -@import '03-widgets/bulk-actions'; +@use '03-widgets/bulk-actions' as *; /*! 4.10. Form */ -@import '03-widgets/form'; +@use '03-widgets/form' as *; /*! 4.11. Upload */ -@import '03-widgets/upload'; +@use '03-widgets/upload' as *; /*! 4.12. Button Group */ -@import '03-widgets/button-group'; +@use '03-widgets/button-group' as *; /*! 4.13. Popover */ -@import '03-widgets/popover'; +@use '03-widgets/popover' as *; /*! 4.14. Popover - ODC */ -@import '03-widgets/popover-odc'; +@use '03-widgets/popover-odc' as *; /*! 4.15. Popup */ -@import '03-widgets/popup'; +@use '03-widgets/popup' as *; /*! 4.16. Feedback Message */ -@import '03-widgets/feedback-message'; +@use '03-widgets/feedback-message' as *; /*! 4.17. Radio Button */ -@import '03-widgets/radio-button'; +@use '03-widgets/radio-button' as *; /*! ============================================================================== 5. Providers =============================================================================== */ /*! 5.1. Flatpickr */ -@import '04-patterns/03-interaction/date-picker/provider/_flatpickr_lib.scss'; +@use '04-patterns/03-interaction/date-picker/provider/_flatpickr_lib.scss' as *; /*! 5.2. NoUiSlider */ -@import '04-patterns/03-interaction/range-slider/provider/_noUiSlider.scss'; +@use '04-patterns/03-interaction/range-slider/provider/_noUiSlider.scss' as *; /*! 5.3. Splide */ -@import '04-patterns/02-content/carousel/provider/splide-core.scss'; +@use '04-patterns/02-content/carousel/provider/splide-core.scss' as *; /*! 5.4. VirtualSelect */ -@import '04-patterns/03-interaction/dropdown/provider/_virtualselect_lib.scss'; +@use '04-patterns/03-interaction/dropdown/provider/_virtualselect_lib.scss' as *; /*! ============================================================================== 6. Patterns =============================================================================== */ /*! 6.1. Adaptive */ /*! 6.1.1. Columns */ -@import '04-patterns/01-adaptive/columns'; +@use '04-patterns/01-adaptive/columns' as *; /*! 6.1.2. Gallery */ -@import '../scss/04-patterns/01-adaptive/gallery/gallery'; +@use '../scss/04-patterns/01-adaptive/gallery/gallery' as *; /*! 6.1.3. Master Detail */ -@import '04-patterns/01-adaptive/master-detail'; +@use '04-patterns/01-adaptive/master-detail' as *; /*! 6.2. Content */ /*! 6.2.1. Accordion */ -@import '../scss/04-patterns/02-content/accordion/accordion'; +@use '../scss/04-patterns/02-content/accordion/accordion' as *; /*! 6.2.2. Accordion Item */ -@import '../scss/04-patterns/02-content/accordion-item/accordion-item'; +@use '../scss/04-patterns/02-content/accordion-item/accordion-item' as *; /*! 6.2.3. Alert */ -@import '04-patterns/02-content/alert'; +@use '04-patterns/02-content/alert' as *; /*! 6.2.4. Blank Slate */ -@import '04-patterns/02-content/blank-slate'; +@use '04-patterns/02-content/blank-slate' as *; /*! 6.2.5. Card */ -@import '04-patterns/02-content/card'; +@use '04-patterns/02-content/card' as *; /*! 6.2.6. Card Background */ -@import '04-patterns/02-content/card-background'; +@use '04-patterns/02-content/card-background' as *; /*! 6.2.7. Card Item */ -@import '04-patterns/02-content/card-item'; +@use '04-patterns/02-content/card-item' as *; /*! 6.2.8. Card Sectioned */ -@import '04-patterns/02-content/card-sectioned'; +@use '04-patterns/02-content/card-sectioned' as *; /*! 6.2.9. Chat Message */ -@import '04-patterns/02-content/chat-message'; +@use '04-patterns/02-content/chat-message' as *; /*! 6.2.10. Flip Content */ -@import '../scss/04-patterns/02-content/flip-content/flipcontent'; +@use '../scss/04-patterns/02-content/flip-content/flipcontent' as *; /*! 6.2.11. Floating Content */ -@import '04-patterns/02-content/floating-content'; +@use '04-patterns/02-content/floating-content' as *; /*! 6.2.12. List Item Content */ -@import '04-patterns/02-content/list-item-content'; +@use '04-patterns/02-content/list-item-content' as *; /*! 6.2.13. Section */ -@import '04-patterns/02-content/section'; +@use '04-patterns/02-content/section' as *; /*! 6.2.14. Tag */ -@import '04-patterns/02-content/tag'; +@use '04-patterns/02-content/tag' as *; /*! 6.2.15. Tooltip */ -@import '../scss/04-patterns/03-interaction/tooltip/tooltip'; +@use '../scss/04-patterns/03-interaction/tooltip/tooltip' as *; /*! 6.2.16. User Avatar */ -@import '04-patterns/02-content/user-avatar'; +@use '04-patterns/02-content/user-avatar' as *; /*! 6.3. Interaction */ /*! 6.3.1. Action Sheet */ -@import '04-patterns/03-interaction/action-sheet'; +@use '04-patterns/03-interaction/action-sheet' as *; /*! 6.3.2. Animate */ -@import '04-patterns/03-interaction/animate'; +@use '04-patterns/03-interaction/animate' as *; /*! 6.3.3. Animated Label */ -@import '../scss/04-patterns/03-interaction/animated-label/animated-label'; +@use '../scss/04-patterns/03-interaction/animated-label/animated-label' as *; /*! 6.3.4. Balloon */ -@import '../scss/04-patterns/03-interaction/balloon/balloon'; +@use '../scss/04-patterns/03-interaction/balloon/balloon' as *; /*! 6.3.5. Bottom Sheet */ -@import '../scss/04-patterns/01-adaptive/bottom-sheet/bottomsheet'; +@use '../scss/04-patterns/01-adaptive/bottom-sheet/bottomsheet' as *; /*! 6.3.6. Carousel */ -@import '../scss/04-patterns/02-content/carousel/carousel'; +@use '../scss/04-patterns/02-content/carousel/carousel' as *; /*! 6.3.7. DatePicker */ -@import '../scss/04-patterns/03-interaction/date-picker/datepicker'; +@use '../scss/04-patterns/03-interaction/date-picker/datepicker' as *; /*! 6.3.8. Dropdown */ -@import '../scss/04-patterns/03-interaction/dropdown/dropdown'; +@use '../scss/04-patterns/03-interaction/dropdown/dropdown' as *; /*! 6.3.8.1 Dropdown Search */ -@import '../scss/04-patterns/03-interaction/dropdown/dropdown-search'; +@use '../scss/04-patterns/03-interaction/dropdown/dropdown-search' as *; /*! 6.3.8.2 Dropdown Tags */ -@import '../scss/04-patterns/03-interaction/dropdown/dropdown-tags'; +@use '../scss/04-patterns/03-interaction/dropdown/dropdown-tags' as *; /*! 6.3.9. Floating Actions */ -@import '04-patterns/03-interaction/floating-actions'; +@use '04-patterns/03-interaction/floating-actions' as *; /*! 6.3.10. Input With Icon */ -@import '04-patterns/03-interaction/input-with-icon'; +@use '04-patterns/03-interaction/input-with-icon' as *; /*! 6.3.11. Lightbox Image */ -@import '04-patterns/03-interaction/lightbox-image'; +@use '04-patterns/03-interaction/lightbox-image' as *; /*! 6.3.12. MonthPicker */ -@import '../scss/04-patterns/03-interaction/month-picker/monthpicker'; +@use '../scss/04-patterns/03-interaction/month-picker/monthpicker' as *; /*! 6.3.13. Notification */ -@import '../scss/04-patterns/03-interaction/notification/notification'; +@use '../scss/04-patterns/03-interaction/notification/notification' as *; /*! 6.3.14. RangeSlider */ -@import '../scss/04-patterns/03-interaction/range-slider/rangeslider'; +@use '../scss/04-patterns/03-interaction/range-slider/rangeslider' as *; /*! 6.3.15. Range Slider - ODC */ -@import '04-patterns/03-interaction/rangeslider-odc'; +@use '04-patterns/03-interaction/rangeslider-odc' as *; /*! 6.3.16. Scrollable Area */ -@import '04-patterns/03-interaction/scrollable-area'; +@use '04-patterns/03-interaction/scrollable-area' as *; /*! 6.3.17. Sidebar */ -@import '../scss/04-patterns/04-navigation/sidebar/sidebar'; +@use '../scss/04-patterns/04-navigation/sidebar/sidebar' as *; /*! 6.3.18. Search */ -@import '../scss/04-patterns/03-interaction/search/search'; +@use '../scss/04-patterns/03-interaction/search/search' as *; /*! 6.3.19. Stacked Cards */ -@import '04-patterns/03-interaction/stacked-cards'; +@use '04-patterns/03-interaction/stacked-cards' as *; /*! 6.3.20. TimePicker */ -@import '../scss/04-patterns/03-interaction/time-picker/timepicker'; +@use '../scss/04-patterns/03-interaction/time-picker/timepicker' as *; /*! 6.3.21. Video */ -@import '../scss/04-patterns/02-content/video/video'; +@use '../scss/04-patterns/02-content/video/video' as *; /*! 6.4. Navigation */ /*! 6.4.1. Bottom Bar Item */ -@import '04-patterns/04-navigation/bottom-bar-item'; +@use '04-patterns/04-navigation/bottom-bar-item' as *; /*! 6.4.2. Breadcrumbs */ -@import '04-patterns/04-navigation/breadcrumbs'; +@use '04-patterns/04-navigation/breadcrumbs' as *; /*! 6.4.3. OverflowMenu */ -@import '../scss/04-patterns/03-interaction/overflow-menu/overflowmenu'; +@use '../scss/04-patterns/03-interaction/overflow-menu/overflowmenu' as *; /*! 6.4.4. Pagination */ -@import '04-patterns/04-navigation/pagination'; +@use '04-patterns/04-navigation/pagination' as *; /*! 6.4.5. Section Index */ -@import '../scss/04-patterns/04-navigation/section-index/sectionindex'; +@use '../scss/04-patterns/04-navigation/section-index/sectionindex' as *; /*! 6.4.6. Submenu */ -@import '../scss/04-patterns/04-navigation/submenu/submenu'; +@use '../scss/04-patterns/04-navigation/submenu/submenu' as *; /*! 6.4.7. Tabs */ -@import '../scss/04-patterns/04-navigation/tabs/tabs'; +@use '../scss/04-patterns/04-navigation/tabs/tabs' as *; /*! 6.4.8. Timeline */ -@import '04-patterns/04-navigation/timeline'; +@use '04-patterns/04-navigation/timeline' as *; /*! 6.4.9. Wizard */ -@import '04-patterns/04-navigation/wizard'; +@use '04-patterns/04-navigation/wizard' as *; /*! 6.5. Numbers */ /*! 6.5.1. Badge */ -@import '04-patterns/05-numbers/badge'; +@use '04-patterns/05-numbers/badge' as *; /*! 6.5.2. Counter */ -@import '04-patterns/05-numbers/counter'; +@use '04-patterns/05-numbers/counter' as *; /*! 6.5.3. Icon Badge */ -@import '04-patterns/05-numbers/icon-badge'; +@use '04-patterns/05-numbers/icon-badge' as *; /*! 6.5.4. Progress */ /*! 6.5.4.1 Progress Bar */ -@import '../scss/04-patterns/05-numbers/progress/progressbar'; +@use '../scss/04-patterns/05-numbers/progress/progressbar' as *; /*! 6.5.4.2 Progress Circle */ -@import '../scss/04-patterns/05-numbers/progress/progresscircle'; +@use '../scss/04-patterns/05-numbers/progress/progresscircle' as *; /*! 6.5.5. Rating */ -@import '../scss/04-patterns/05-numbers/rating/rating'; +@use '../scss/04-patterns/05-numbers/rating/rating' as *; /*! 6.6. Utilities */ /*! 6.6.1. Align Center */ -@import '04-patterns/06-utilities/align-center'; +@use '04-patterns/06-utilities/align-center' as *; /*! 6.6.2. Button Loading */ -@import '../scss/04-patterns/03-interaction/button-loading/button-loading'; +@use '../scss/04-patterns/03-interaction/button-loading/button-loading' as *; /*! 6.6.3. Center Content */ -@import '04-patterns/06-utilities/center-content'; +@use '04-patterns/06-utilities/center-content' as *; /*! 6.6.4. Margin Container */ -@import '04-patterns/06-utilities/margin-container'; +@use '04-patterns/06-utilities/margin-container' as *; /*! 6.6.5. Separator */ -@import '04-patterns/06-utilities/separator'; +@use '04-patterns/06-utilities/separator' as *; /*! 6.6.6. Pull to Refresh */ -@import '04-patterns/06-utilities/pull-to-refresh'; +@use '04-patterns/06-utilities/pull-to-refresh' as *; /*! 6.6.7. List Updating */ -@import '04-patterns/06-utilities/list-updating'; +@use '04-patterns/06-utilities/list-updating' as *; /*! 6.6.8. Provider Login Button */ -@import '04-patterns/06-utilities/provider-login-button'; +@use '04-patterns/06-utilities/provider-login-button' as *; /*! 6.7. Advanced */ /*! 6.7.1. Dropdown ServerSide */ -@import '../scss/04-patterns/03-interaction/dropdown/dropdown-serverside'; +@use '../scss/04-patterns/03-interaction/dropdown/dropdown-serverside' as *; /*! 6.7.2. Dropdown ServerSide Item */ -@import '../scss/04-patterns/03-interaction/dropdown/dropdownserversideitem'; +@use '../scss/04-patterns/03-interaction/dropdown/dropdownserversideitem' as *; /*! ============================================================================== 7. Usefull Classes =============================================================================== */ /*! 7.1. a11y (Accessibility) */ -@import '05-useful/a11y'; +@use '05-useful/a11y' as *; /*! 7.2. Colors - Brand */ -@import '05-useful/colors-brand'; +@use '05-useful/colors-brand' as *; /*! 7.3. Colors - Neutral */ -@import '05-useful/colors-neutral'; +@use '05-useful/colors-neutral' as *; /*! 7.4. Colors - Palette */ -@import '05-useful/colors-palette'; +@use '05-useful/colors-palette' as *; /*! 7.5. Colors - Semantic */ -@import '05-useful/colors-semantic'; +@use '05-useful/colors-semantic' as *; /*! 7.6. Colors - Others */ -@import '05-useful/colors-others'; +@use '05-useful/colors-others' as *; /*! 7.7. Text */ -@import '05-useful/text'; +@use '05-useful/text' as *; /*! 7.8. Typography */ -@import '05-useful/typography'; +@use '05-useful/typography' as *; /*! 7.9. Border Size */ -@import '05-useful/border-size'; +@use '05-useful/border-size' as *; /*! 7.10. Border Radius */ -@import '05-useful/border-radius'; +@use '05-useful/border-radius' as *; /*! 7.11. Space - Margin */ -@import '05-useful/space-margin'; +@use '05-useful/space-margin' as *; /*! 7.12. Space - Padding */ -@import '05-useful/space-padding'; +@use '05-useful/space-padding' as *; /*! 7.13. Shadow */ -@import '05-useful/shadow'; +@use '05-useful/shadow' as *; /*! 7.14. Box Width */ -@import '05-useful/box-width'; +@use '05-useful/box-width' as *; /*! 7.15. Box Height */ -@import '05-useful/box-height'; +@use '05-useful/box-height' as *; /*! 7.16. Display */ -@import '05-useful/display'; +@use '05-useful/display' as *; /*! 7.17. Display - Flex */ -@import '05-useful/display-flex'; +@use '05-useful/display-flex' as *; /*! 7.18. Display - Align */ -@import '05-useful/display-align'; +@use '05-useful/display-align' as *; /*! 7.19. Images */ -@import '05-useful/images'; +@use '05-useful/images' as *; /*! 7.20. Overflow */ -@import '05-useful/overflow'; +@use '05-useful/overflow' as *; /*! 7.21. Visibility */ -@import '05-useful/visibility'; +@use '05-useful/visibility' as *; /*! 7.22. Position */ -@import '05-useful/positioning'; +@use '05-useful/positioning' as *; /*! 7.23. Position - Absolute */ -@import '05-useful/positioning-absolute'; +@use '05-useful/positioning-absolute' as *; /*! 7.24. Miscellaneous */ -@import '05-useful/miscellaneous'; +@use '05-useful/miscellaneous' as *; /*! ============================================================================== 8. Screen Transitions =============================================================================== */ -@import '06-screen-transitions/screen-transitions'; +@use '06-screen-transitions/screen-transitions' as *; /*! ============================================================================== 9. Keyframes - Animations =============================================================================== */ /*! 9.1. Animate */ -@import '07-keyframes/animate'; +@use '07-keyframes/animate' as *; /*! 9.2. Button Loading */ -@import '07-keyframes/btn-loading'; +@use '07-keyframes/btn-loading' as *; /*! 9.3. List Item */ -@import '07-keyframes/list-item'; +@use '07-keyframes/list-item' as *; /*! 9.4. Feedback Message */ -@import '07-keyframes/feedback-message'; +@use '07-keyframes/feedback-message' as *; /*! 9.5. Pull To Refresh */ -@import '07-keyframes/pull-to-refresh'; +@use '07-keyframes/pull-to-refresh' as *; /*! 9.6. Miscellaneous */ -@import '07-keyframes/miscellaneous'; +@use '07-keyframes/miscellaneous' as *; /*! ============================================================================== 10. Service Studio Preview =============================================================================== */ -@import '08-servicestudio-preview/servicestudiopreview'; -@import '08-servicestudio-preview/placeholder-empty-odc'; -@import '08-servicestudio-preview/deprecated-preview'; +@use '08-servicestudio-preview/servicestudiopreview' as *; +@use '08-servicestudio-preview/placeholder-empty-odc' as *; +@use '08-servicestudio-preview/deprecated-preview' as *; /* =============================================================================== Excluders =============================================================================== */ -@import '09-excluders/excluders'; +@use '09-excluders/excluders' as *; diff --git a/stories/Badge.stories.ts b/stories/Badge.stories.ts index 613901eeb6..bc5a5ffb66 100644 --- a/stories/Badge.stories.ts +++ b/stories/Badge.stories.ts @@ -76,8 +76,8 @@ export const Default: StoryObj = { const bgClass = color ? `background-${color}${isLight ? lightBgSuffix(color) : ''}` : ''; // IsLight pairs the light background with the color's darker text variant // (semantic colors only expose `text-{color}`, palette/brand use `-darker`). - const textClass = - color && isLight ? `text-${color}${SEMANTIC_LIGHT_COLORS.has(color) ? '' : '-darker'}` : ''; + const textSuffix = SEMANTIC_LIGHT_COLORS.has(color) ? '' : '-darker'; + const textClass = color && isLight ? `text-${color}${textSuffix}` : ''; const shapeClass = shape ? `border-radius-${shape}` : ''; const sizeClass = size ? `badge-${size}` : ''; return renderStatic( diff --git a/stories/Tag.stories.ts b/stories/Tag.stories.ts index e4f064ad1d..493096b3fd 100644 --- a/stories/Tag.stories.ts +++ b/stories/Tag.stories.ts @@ -72,8 +72,8 @@ export const Default: StoryObj = { const bgClass = color ? `background-${color}${isLight ? lightBgSuffix(color) : ''}` : ''; // IsLight pairs the light background with the color's darker text variant // (semantic colors only expose `text-{color}`, palette/brand use `-darker`). - const textClass = - color && isLight ? `text-${color}${SEMANTIC_LIGHT_COLORS.has(color) ? '' : '-darker'}` : ''; + const textSuffix = SEMANTIC_LIGHT_COLORS.has(color) ? '' : '-darker'; + const textClass = color && isLight ? `text-${color}${textSuffix}` : ''; const shapeClass = shape ? `border-radius-${shape}` : ''; const sizeClass = size ? `tag-${size}` : ''; return renderStatic( diff --git a/stories/UserAvatar.stories.ts b/stories/UserAvatar.stories.ts index e7edd3a6a8..6388ed43d7 100644 --- a/stories/UserAvatar.stories.ts +++ b/stories/UserAvatar.stories.ts @@ -95,8 +95,8 @@ export const Default: StoryObj = { const bgClass = color ? `background-${color}${isLight ? lightBgSuffix(color) : ''}` : ''; // IsLight pairs the light background with the color's darker text variant // (semantic colors only expose `text-{color}`, palette/brand use `-darker`). - const textClass = - color && isLight ? `text-${color}${SEMANTIC_LIGHT_COLORS.has(color) ? '' : '-darker'}` : ''; + const textSuffix = SEMANTIC_LIGHT_COLORS.has(color) ? '' : '-darker'; + const textClass = color && isLight ? `text-${color}${textSuffix}` : ''; const shapeClass = shape ? `border-radius-${shape}` : ''; const sizeClass = size ? `avatar-${size}` : ''; const label = `user initials, ${initials(name)}`; diff --git a/stories/_helpers/lowcode.ts b/stories/_helpers/lowcode.ts index d661797821..9a0d362c6c 100644 --- a/stories/_helpers/lowcode.ts +++ b/stories/_helpers/lowcode.ts @@ -18,7 +18,20 @@ export const cls = (...parts: (string | false | null | undefined)[]): string => * `Color` / `BackgroundColor` low-code enum → `background-{value}` utility class. * Subset of the OUI palette (the full Color static entity is large); '' = none. */ -export const COLOR_OPTIONS = ['', 'primary', 'secondary', 'success', 'warning', 'error', 'info', 'neutral-0', 'blue', 'green', 'grape', 'cyan']; +export const COLOR_OPTIONS = [ + '', + 'primary', + 'secondary', + 'success', + 'warning', + 'error', + 'info', + 'neutral-0', + 'blue', + 'green', + 'grape', + 'cyan', +]; /** Shared `ExtendedClass` control — present on essentially every OUI block. */ export const extendedClassArgType = { diff --git a/stories/_helpers/osui.ts b/stories/_helpers/osui.ts index 4d8781980b..edcd28bb3c 100644 --- a/stories/_helpers/osui.ts +++ b/stories/_helpers/osui.ts @@ -122,12 +122,7 @@ export function renderStatic(template: string): HTMLElement { } /** Create + Initialize a single pattern and register its Dispose for cleanup. */ -export function createAndInit( - apiName: string, - id: string, - configs: Record, - register: Register -): any { +export function createAndInit(apiName: string, id: string, configs: Record, register: Register): any { const api = Patterns()[apiName]; if (!api) throw new Error(`OUI API not found: OutSystems.OSUI.Patterns.${apiName} (is the bundle loaded?)`); const instance = api.Create(id, cfg(configs)); diff --git a/stories/widgets/ButtonGroup.stories.ts b/stories/widgets/ButtonGroup.stories.ts index 3825116ca5..de5c711e0e 100644 --- a/stories/widgets/ButtonGroup.stories.ts +++ b/stories/widgets/ButtonGroup.stories.ts @@ -7,28 +7,36 @@ export default meta; type Story = StoryObj; const item = (value: string, label: string, selected: boolean) => - createElement(ButtonGroupItem as never, { - ...widgetBaseProps('button-group-item'), - value, - style: 'button-group-item', - isSelected: selected, - enabled: true, - tabIndex: -1, - updateValueInParent: () => {}, - getFocusableElementId: () => '', - key: value, - }, label); + createElement( + ButtonGroupItem as never, + { + ...widgetBaseProps('button-group-item'), + value, + style: 'button-group-item', + isSelected: selected, + enabled: true, + tabIndex: -1, + updateValueInParent: () => {}, + getFocusableElementId: () => '', + key: value, + }, + label + ); export const Default: Story = { render: () => mountTree( - createElement(ButtonGroup as never, { - ...widgetBaseProps('button-group'), - variable: createVariable(DataTypes.DataTypes.Text, 'week'), - enabled: true, - mandatory: false, - style: 'button-group', - onChange: () => {}, - }, [item('day', 'Day', false), item('week', 'Week', true), item('month', 'Month', false)]) + createElement( + ButtonGroup as never, + { + ...widgetBaseProps('button-group'), + variable: createVariable(DataTypes.DataTypes.Text, 'week'), + enabled: true, + mandatory: false, + style: 'button-group', + onChange: () => {}, + }, + [item('day', 'Day', false), item('week', 'Week', true), item('month', 'Month', false)] + ) ), }; diff --git a/stories/widgets/Dropdown.stories.ts b/stories/widgets/Dropdown.stories.ts index d16a670ff8..123ce03177 100644 --- a/stories/widgets/Dropdown.stories.ts +++ b/stories/widgets/Dropdown.stories.ts @@ -1,7 +1,14 @@ import type { Meta, StoryObj } from '@storybook/html-vite'; import { Fragment } from 'react'; import { Dropdown } from '@outsystems/runtime-widgets-js'; -import { createVariable, DataTypes, createElement, mountWidget, runtimeMock, widgetBaseProps } from '../_helpers/widget'; +import { + createVariable, + DataTypes, + createElement, + mountWidget, + runtimeMock, + widgetBaseProps, +} from '../_helpers/widget'; // DropdownMode const enum → numeric: Text(native) 0, Custom 1. const OPTIONS = [ @@ -17,7 +24,9 @@ type Story = StoryObj; function DropdownsWrapper(props: any) { const list = runtimeMock({ length: OPTIONS.length, getItem: (i: number) => OPTIONS[i] }); - return createElement(Fragment, null, + return createElement( + Fragment, + null, // Container createElement( 'div', @@ -53,7 +62,7 @@ function DropdownsWrapper(props: any) { }, }), }), - }), + }) ), // Native column createElement( @@ -74,9 +83,9 @@ function DropdownsWrapper(props: any) { style: '', onChange: () => {}, placeholders: null, - }), - ), - ), + }) + ) + ) ); } diff --git a/stories/widgets/Icon.stories.ts b/stories/widgets/Icon.stories.ts index bd1976e514..fdf364fa6c 100644 --- a/stories/widgets/Icon.stories.ts +++ b/stories/widgets/Icon.stories.ts @@ -8,7 +8,13 @@ export default meta; type Story = StoryObj; const icon = (name: string, size: number) => - createElement(Icon as never, { ...widgetBaseProps('icon'), icon: name, iconSize: size, style: '', key: name + size }); + createElement(Icon as never, { + ...widgetBaseProps('icon'), + icon: name, + iconSize: size, + style: '', + key: name + size, + }); export const Default: Story = { render: () => diff --git a/stories/widgets/Label.stories.ts b/stories/widgets/Label.stories.ts index 122179012f..2a59e1446f 100644 --- a/stories/widgets/Label.stories.ts +++ b/stories/widgets/Label.stories.ts @@ -9,6 +9,10 @@ type Story = StoryObj; export const Default: Story = { render: () => mountTree( - createElement(Label as never, { ...widgetBaseProps('label'), targetWidget: 'someInput', mandatory: true, style: '' }, 'Email address') + createElement( + Label as never, + { ...widgetBaseProps('label'), targetWidget: 'someInput', mandatory: true, style: '' }, + 'Email address' + ) ), }; diff --git a/stories/widgets/Link.stories.ts b/stories/widgets/Link.stories.ts index 62aaa78fd4..5ef36bf2fe 100644 --- a/stories/widgets/Link.stories.ts +++ b/stories/widgets/Link.stories.ts @@ -11,6 +11,21 @@ type Story = StoryObj; export const Default: Story = { render: () => mountTree( - createElement(MemoryRouter as never, null, createElement(Link as never, { ...widgetBaseProps('link'), url: '/somewhere', enabled: true, confirmationMessage: '', onClick: () => {}, style: '' }, 'Go to page')) + createElement( + MemoryRouter as never, + null, + createElement( + Link as never, + { + ...widgetBaseProps('link'), + url: '/somewhere', + enabled: true, + confirmationMessage: '', + onClick: () => {}, + style: '', + }, + 'Go to page' + ) + ) ), }; diff --git a/stories/widgets/Popup.stories.ts b/stories/widgets/Popup.stories.ts index 568188845a..e79fd4e2a6 100644 --- a/stories/widgets/Popup.stories.ts +++ b/stories/widgets/Popup.stories.ts @@ -9,11 +9,13 @@ type Story = StoryObj; export const Default: Story = { render: () => mountTree( - createElement(Popup as never, { ...widgetBaseProps('popup'), showPopup: true, style: '' }, - [ - createElement('h2', { key: 'h', style: { marginTop: 0 } }, 'Confirm action'), - createElement('p', { key: 'p' }, 'The platform Popup widget renders a centered dialog over a backdrop.'), - ] - ) + createElement(Popup as never, { ...widgetBaseProps('popup'), showPopup: true, style: '' }, [ + createElement('h2', { key: 'h', style: { marginTop: 0 } }, 'Confirm action'), + createElement( + 'p', + { key: 'p' }, + 'The platform Popup widget renders a centered dialog over a backdrop.' + ), + ]) ), }; diff --git a/stories/widgets/RadioGroup.stories.ts b/stories/widgets/RadioGroup.stories.ts index 14daa23c79..b4c24b4861 100644 --- a/stories/widgets/RadioGroup.stories.ts +++ b/stories/widgets/RadioGroup.stories.ts @@ -7,31 +7,43 @@ export default meta; type Story = StoryObj; const radio = (value: string, label: string, selected: boolean) => - createElement(RadioButton as never, { - ...widgetBaseProps('radio-button'), - value, - // OUI styles the radio via the `.radio-button` CLASS (not a data-attr like - // checkbox/switch); the widget puts `style` onto the input's className. - style: 'radio-button', - isSelected: selected, - enabled: true, - groupName: 'radiogroup', - tabIndex: -1, - updateValueInParent: () => {}, - getFocusableElementId: () => '', - key: value, - }, label); + createElement( + RadioButton as never, + { + ...widgetBaseProps('radio-button'), + value, + // OUI styles the radio via the `.radio-button` CLASS (not a data-attr like + // checkbox/switch); the widget puts `style` onto the input's className. + style: 'radio-button', + isSelected: selected, + enabled: true, + groupName: 'radiogroup', + tabIndex: -1, + updateValueInParent: () => {}, + getFocusableElementId: () => '', + key: value, + }, + label + ); export const Default: Story = { render: () => mountTree( - createElement(RadioGroup as never, { - ...widgetBaseProps('radio-group'), - variable: createVariable(DataTypes.DataTypes.Text, 'two'), - enabled: true, - mandatory: false, - style: 'radio-group', - onChange: () => {}, - }, [radio('one', 'Option one', false), radio('two', 'Option two', true), radio('three', 'Option three', false)]) + createElement( + RadioGroup as never, + { + ...widgetBaseProps('radio-group'), + variable: createVariable(DataTypes.DataTypes.Text, 'two'), + enabled: true, + mandatory: false, + style: 'radio-group', + onChange: () => {}, + }, + [ + radio('one', 'Option one', false), + radio('two', 'Option two', true), + radio('three', 'Option three', false), + ] + ) ), }; diff --git a/stories/widgets/Text.stories.ts b/stories/widgets/Text.stories.ts index eee1db4b22..f953102851 100644 --- a/stories/widgets/Text.stories.ts +++ b/stories/widgets/Text.stories.ts @@ -8,5 +8,9 @@ type Story = StoryObj; export const Default: Story = { render: () => - mountWidget(Text as never, { ...widgetBaseProps('text'), text: 'Plain platform Text widget output.', style: '' }), + mountWidget(Text as never, { + ...widgetBaseProps('text'), + text: 'Plain platform Text widget output.', + style: '', + }), };