diff --git a/package-lock.json b/package-lock.json index 27f0d96c8..5e0f3607c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29665,7 +29665,7 @@ }, "packages/sui-pde": { "name": "@s-ui/pde", - "version": "2.29.0", + "version": "2.30.0", "license": "MIT", "dependencies": { "@optimizely/optimizely-sdk": "5.3.4", @@ -29927,7 +29927,7 @@ }, "packages/sui-segment-wrapper": { "name": "@s-ui/segment-wrapper", - "version": "4.5.0", + "version": "4.8.0", "license": "ISC", "dependencies": { "@s-ui/js": "2", @@ -30075,7 +30075,7 @@ }, "packages/sui-svg": { "name": "@s-ui/svg", - "version": "3.24.0", + "version": "3.25.0", "license": "MIT", "dependencies": { "@s-ui/react-atom-icon": "1", diff --git a/packages/sui-theme/.npmignore b/packages/sui-theme/.npmignore deleted file mode 100644 index dbf07588b..000000000 --- a/packages/sui-theme/.npmignore +++ /dev/null @@ -1,7 +0,0 @@ -node_modules -npm-debug.log -src -.editorconfig -.gitignore -.sass-lint.yml -.scss-lint.yml diff --git a/packages/sui-theme/CHANGELOG.md b/packages/sui-theme/CHANGELOG.md deleted file mode 100644 index 22a7ebefd..000000000 --- a/packages/sui-theme/CHANGELOG.md +++ /dev/null @@ -1,289 +0,0 @@ -# CHANGELOG - -# 8.127.0 (2024-05-06) - - -### Bug Fixes - -* fix linting issues ([37213c0](https://github.com/SUI-Components/sui/commit/37213c085abc6ba99e1d784c88e4b026ec161134)) - - - -# 8.126.0 (2023-02-21) - - -### Features - -* **packages/sui-theme:** add mixin to hide scrollbars when required ([218c16d](https://github.com/SUI-Components/sui/commit/218c16d7658de48c5c390175efcfe3cf4dfb8469)) - - - -# 8.125.0 (2022-11-22) - - -### Features - -* **packages/sui-theme:** add new molecule select and autosuggest tokens to theme ([72a630a](https://github.com/SUI-Components/sui/commit/72a630a6e967d21ad2dbd59191eef022847cc1c0)) - - - -# 8.124.0 (2022-09-29) - - -### Bug Fixes - -* **packages/sui-theme:** remove not required rimraf dependency ([d648db5](https://github.com/SUI-Components/sui/commit/d648db5bda012c3af40dde387ef678b9ba12bd2d)) - - - -# 8.123.0 (2022-09-05) - - -### Features - -* **packages/sui-theme:** add new classes folder ([016d381](https://github.com/SUI-Components/sui/commit/016d3814c27933d428c38bf7fab6e96bf20c085c)) -* **packages/sui-theme:** add spacing utils ([5568faa](https://github.com/SUI-Components/sui/commit/5568faa4fc173086b89a73044c837a001d3b4c4d)) -* **packages/sui-theme:** create in same file spacing classes ([0f3bd24](https://github.com/SUI-Components/sui/commit/0f3bd2486247f29688149db05343e79e577437de)) -* **packages/sui-theme:** update classes tree directory ([f8de229](https://github.com/SUI-Components/sui/commit/f8de229f70f96d611bdd36c035c638a4debfdc87)) - - - -# 8.122.0 (2022-02-08) - - -### Bug Fixes - -* **packages/sui-theme:** set proper emmet naming to border radius ([7aa54b1](https://github.com/SUI-Components/sui/commit/7aa54b1a527acc2652226102395e8fc7aa9865de)) - - -### Features - -* **packages/sui-theme:** add new variables to dropdown basic and user ([a19c94c](https://github.com/SUI-Components/sui/commit/a19c94c4e850665728ceb38f1ca916d5f00a1f0b)) - - - -# 8.121.0 (2022-01-31) - - -### Features - -* **packages/sui-theme:** Add new box shadow size variable ([a26c335](https://github.com/SUI-Components/sui/commit/a26c335e3faa9a8ab8867e6289b5df1853170d28)) - - - -# 8.120.0 (2022-01-24) - - - -# 8.119.0 (2022-01-18) - - -### Features - -* **packages/sui-theme:** add new link font weight variable ([fcb4e3f](https://github.com/SUI-Components/sui/commit/fcb4e3f30029d82ebff967ffa5bc660c779573cf)) -* **packages/sui-theme:** add new variable ([a22335a](https://github.com/SUI-Components/sui/commit/a22335afd6a280af55a5182b5049f4171a03b7d6)) - - - -# 8.118.0 (2022-01-11) - - -### Bug Fixes - -* **packages/sui-theme:** fix variable declaration order ([d7ab7a9](https://github.com/SUI-Components/sui/commit/d7ab7a957224b5dc6f2c3cfcd4e64400abc93933)) - - - -# 8.117.0 (2022-01-10) - - -### Features - -* **packages/sui-theme:** allow to overwrite the card article description color ([3f95a1c](https://github.com/SUI-Components/sui/commit/3f95a1ca947e5d1502f4c4ed2b44a50dcc9f9f8b)) - - - -# 8.116.0 (2021-12-02) - - - -# 8.115.0 (2021-12-02) - - -### Features - -* **packages/sui-theme:** add new variable: border input focus ([f695ef2](https://github.com/SUI-Components/sui/commit/f695ef206f7fad0e1a1e16702358c2bb239ba1e6)) - - - -# 8.114.0 (2021-11-26) - - -### Features - -* **packages/sui-theme:** Avoid using copyfiles dependency for copying files ([5079245](https://github.com/SUI-Components/sui/commit/5079245570fa0f774cf8d592dea587253565a84b)) - - - -# 8.113.0 (2021-11-11) - - -### Bug Fixes - -* **packages/sui-theme:** add deleted styles again to s-ui theme in order to fix breaking change in o ([05d7d98](https://github.com/SUI-Components/sui/commit/05d7d98d6c7e29a3a7390cb2fd8ded98e8f0dead)) - - - -# 8.112.0 (2021-11-10) - - -### Features - -* **packages/sui-theme:** Scss changes for the atom input ([eae13ef](https://github.com/SUI-Components/sui/commit/eae13ef932b5ced3f1fc2d80a59bfb993981b7db)) - - - -# 8.111.0 (2021-11-08) - - -### Features - -* **packages/sui-theme:** Add default values for thumbnail basic ([683d079](https://github.com/SUI-Components/sui/commit/683d0790d2c75af0ae9d6880a9a0116694445ed7)) -* **packages/sui-theme:** Add default! to avoid being overwritten ([b7fdb82](https://github.com/SUI-Components/sui/commit/b7fdb824c1028bdb015d3fa42f55bbbf37d19a9c)) - - - -# 8.110.0 (2021-10-29) - - -### Bug Fixes - -* **packages/sui-theme:** replace [@use](https://github.com/use) for [@import](https://github.com/import) ([ee0893c](https://github.com/SUI-Components/sui/commit/ee0893cbd38bf77724a9bcd29cc98e1e1050424d)) - - - -# 8.109.0 (2021-10-28) - - -### Bug Fixes - -* **packages/sui-theme:** HOTFIX [@use](https://github.com/use) keyword ([94af755](https://github.com/SUI-Components/sui/commit/94af755953bf71f85a08b68dbab87f0f02804d24)) - - - -# 8.108.0 (2021-10-28) - - -### Bug Fixes - -* **packages/sui-theme:** icon sizes depends on its own token ([92f92fd](https://github.com/SUI-Components/sui/commit/92f92fdea50025d790da6285dc3ecfdbaa8db0a1)) -* **packages/sui-theme:** lint ([3e66860](https://github.com/SUI-Components/sui/commit/3e66860caed65b6adaa20d2e09b71c99d80a9e13)) -* **packages/sui-theme:** misspelling ([c640394](https://github.com/SUI-Components/sui/commit/c6403940386c23beeb1edb250944d6f40532c0e1)) - - -### Features - -* **packages/sui-theme:** Sets the default gitd system syze base. Start using it. Fixes the addition ([b67ffa9](https://github.com/SUI-Components/sui/commit/b67ffa9c0e7cf9e09cd77a100906cf835f284d89)) - - - -# 8.107.0 (2021-10-27) - - -### Features - -* **packages/sui-theme:** add mixins to be used instead of extends ([4dda7da](https://github.com/SUI-Components/sui/commit/4dda7da6e72845e89e504e8620041843e9d982a2)) - - - -# 8.106.0 (2021-10-15) - - -### Features - -* **packages/sui-theme:** add new bdrs circular ([a98881d](https://github.com/SUI-Components/sui/commit/a98881d9dda533ddbd690bf7a4722663d4380584)) -* **packages/sui-theme:** Add new l and xl input sizes ([66a0e02](https://github.com/SUI-Components/sui/commit/66a0e02abea1c8993a4612134f6194cbb1d6f296)) - - - -# 8.105.0 (2021-09-23) - - -### Features - -* **packages/sui-theme:** make url final slash optional ([81edf12](https://github.com/SUI-Components/sui/commit/81edf126589683fc5705509216fd0456f68492cc)) - - - -# 8.104.0 (2021-07-06) - - -### Features - -* **packages/sui-theme:** add color for tiktok social brand ([56eca1b](https://github.com/SUI-Components/sui/commit/56eca1b565400b005a6589e6cd40017d7c7e3cd6)) - - - -# 8.103.0 (2021-06-22) - - -### Bug Fixes - -* **packages/sui-theme:** Fix lint errors ([60a1316](https://github.com/SUI-Components/sui/commit/60a13166f720556e2f35ca7e5b81b65ef3d69df5)) - - -### Features - -* **packages/sui-theme:** Migrate to avoid using slash as division on SASS ([7bf3399](https://github.com/SUI-Components/sui/commit/7bf3399e361e6bd9bc04c20007b3b6b08c584a80)) - - - -# 8.102.0 (2021-05-28) - - -### Bug Fixes - -* **packages/sui-theme:** use as described in docu ([8e7b2d7](https://github.com/SUI-Components/sui/commit/8e7b2d76d70d8651436d7721a3fdb48bfd7f3f85)) - - -### Features - -* **packages/sui-theme:** remove clean ([8771c04](https://github.com/SUI-Components/sui/commit/8771c046eefc639d8a3a8ccd961842f8196e01af)) - - - -# 8.101.0 (2021-05-28) - - -### Bug Fixes - -* **packages/sui-theme:** lib script copy path ([e066e24](https://github.com/SUI-Components/sui/commit/e066e242cd528f6d5045efcd759ff10b9c19c57d)) - - - -# 8.100.0 (2021-05-27) - - -### Bug Fixes - -* **packages/sui-theme:** Force new release of theme ([f1cd9b9](https://github.com/SUI-Components/sui/commit/f1cd9b90293e49e618c30307a3aa8490203d209e)) -* **packages/sui-theme:** Release correctly sui-theme ([b363f7b](https://github.com/SUI-Components/sui/commit/b363f7b02a7c7bfa9b0c4ee326dbd9cd2f92ce61)) - - - -# 8.99.0 (2021-05-27) - - -### Features - -* **packages/sui-theme:** ad gap variables ([ba878f3](https://github.com/SUI-Components/sui/commit/ba878f350c328f81fbdeca47d1bbbf8b63bd5391)) - - - -# 8.98.0 (2021-04-20) - - -### Features - -* **packages/sui-theme:** moved the sui-theme repo here ([654b877](https://github.com/SUI-Components/sui/commit/654b8777a5e2754e1c41e2c1d907630d1c4266df)) -* **packages/sui-theme:** update latest changes ([877866f](https://github.com/SUI-Components/sui/commit/877866f24fe2053f1985b7a558d1527bcbca1e88)) \ No newline at end of file diff --git a/packages/sui-theme/README.md b/packages/sui-theme/README.md deleted file mode 100644 index f1d935176..000000000 --- a/packages/sui-theme/README.md +++ /dev/null @@ -1,81 +0,0 @@ -# SUI Components Theme - -This repository contains: - -- Generic variables to initialize default values and component styles. -- A set of placeholders ready to style your component (buttons, tabs, forms, grid system...). -- Functions and mixins helpers. - -## Usage - -Install `sui-theme` in your project: - -```bash -npm install @s-ui/theme --save -``` - -Import `sui-theme` into your sui-component including the path in `index.scss`: - -```scss -@import '~@s-ui/theme/lib/index'; -``` - -If you want to customize your components, create your own theme and add it to your component just **before** the sui-theme import. - -```scss -@import '../custom-settings'; -@import '~@s-ui/theme/lib/index'; -``` - -## Upgrade from theme-basic@7 - -Compatibility variables are still available to import manually. - -**Import only what you need, in inheritance order** - -For instance: - -```scss -@import '../custom-settings'; -@import '~@s-ui/theme/lib/settings-compat-v7/color'; -@import '~@s-ui/theme/lib/settings-compat-v7/spacing'; -@import '~@s-ui/theme/lib/index'; -``` - -Find below the compat varible groups available: - -- [settings-compat-v7/color](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_color.scss) -- [settings-compat-v7/font](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_font.scss) -- [settings-compat-v7/spacing](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_spacing.scss) -- [settings-compat-v7/box-style](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_box-style.scss) -- [settings-compat-v7/animation](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_animation.scss) -- [settings-compat-v7/layout](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_layout.scss) -- [settings-compat-v7/components](https://github.com/SUI-Components/sui-theme/blob/master/src/settings-compat-v7/_components.scss) - -**Also, if you need it all for older components, you can do** - -```scss -@import '~@s-ui/theme/lib/settings-compat-v7/index'; -@import '~@s-ui/theme/lib/index'; -``` - -## Media queries and breakpoints - -### Rules & Definitions - -- Breakpoints must be exactly `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl` -- For new implementations, the only allowed media query is `media-breakpoint-up` -- `media-breakpoint-down`, `media-breakpoint-only` and `media-breakpoint-between` are deprecated and only kept for legacy reasons. - -### Reason - -- We want to create all our components `mobile first` - -### Legacy components - -- Keep in mind that refactoring legacy components in order to make it rules compliant would suppose a breaking change, so a new major must be released. - -### Links - -- [SUI Breakpoints](https://github.com/SUI-Components/sui-theme/blob/master/src/layout/_breakpoints.scss) implementation -- [SUI Media Query](https://github.com/SUI-Components/sui-theme/blob/master/src/utils/_breakpoints.scss) implementation diff --git a/packages/sui-theme/package.json b/packages/sui-theme/package.json deleted file mode 100644 index b6c1df90f..000000000 --- a/packages/sui-theme/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "@s-ui/theme", - "version": "8.127.0", - "description": "Generic theme to add styles to all SUI components", - "main": "lib/index.scss", - "scripts": { - "lib": "rm -rf ./lib && cp -R src lib", - "prepublishOnly": "npm run lib" - }, - "license": "MIT", - "homepage": "https://github.com/SUI-Components/sui" -} diff --git a/packages/sui-theme/src/_default.scss b/packages/sui-theme/src/_default.scss deleted file mode 100644 index f4aa979b0..000000000 --- a/packages/sui-theme/src/_default.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin p { - margin: 0 0 $m-v; -} diff --git a/packages/sui-theme/src/_reset.scss b/packages/sui-theme/src/_reset.scss deleted file mode 100644 index fb745152d..000000000 --- a/packages/sui-theme/src/_reset.scss +++ /dev/null @@ -1,38 +0,0 @@ -@mixin reset-basic { - border: 0; - font: inherit; - font-size: 100%; - margin: 0; - padding: 0; - vertical-align: baseline; -} - -@mixin reset-link { - color: $c-text-base; - text-decoration: none; -} - -// For: ul, ol... -@mixin reset-list { - list-style: none; - margin: 0; - padding-left: 0; -} - -@mixin reset-button { - background: none; - border: 0; - cursor: pointer; - font-family: inherit; - padding: 0; - user-select: none; - - &:focus { - outline: 0; - } -} - -@mixin reset-hr { - border: 0; - margin: 0; -} diff --git a/packages/sui-theme/src/_settings.scss b/packages/sui-theme/src/_settings.scss deleted file mode 100644 index e5e38675d..000000000 --- a/packages/sui-theme/src/_settings.scss +++ /dev/null @@ -1,31 +0,0 @@ -// # Theme Variables -// -------------------------------------------------- -// The naming convention used for variables is based on Emmet. -// See [Emmet cheat sheet](http://docs.emmet.io/cheat-sheet/) -// -// Some of the prefixes used: -// * bg = background -// * bgc = background-color -// * c = color -// * ff = font-family -// * fw = font-weight -// * fz = font-size -// * lh = line-height -// * m = margin -// * maw = max-width -// * p = padding -// * ta = text-align -// * z = z-index - -// URLs -// Note: This URL must be overwritten in your own component/site styles. -$url-statics: 'https://statics.sui-cdn.com/' !default; - -@import './settings/color'; -@import './settings/font'; -@import './settings/layers'; -@import './settings/motion'; -@import './settings/opacity'; -@import './settings/size'; -@import './settings/spacing'; -@import './settings/box-style'; diff --git a/packages/sui-theme/src/_typography.scss b/packages/sui-theme/src/_typography.scss deleted file mode 100644 index 367638f72..000000000 --- a/packages/sui-theme/src/_typography.scss +++ /dev/null @@ -1,75 +0,0 @@ -$c-link: $c-primary !default; -$c-link-negative: $c-white !default; - -$c-link-hover: $c-primary-dark !default; -$c-link-negative-hover: $c-white !default; - -$ff-link: $ff-sans-serif !default; -$fw-link: normal !default; -$lh-link: $lh-l !default; - -@mixin link($negative: false) { - color: if($negative, $c-link-negative, $c-link); - font-family: $ff-link; - font-stretch: normal; - font-style: normal; - font-weight: $fw-link; - letter-spacing: normal; - line-height: $lh-link; - text-align: left; - - &:hover, - &:active { - color: if($negative, $c-link-negative-hover, $c-link-hover); - text-decoration: underline; - } -} - -@mixin h1 { - font-size: $fz-h1; - font-weight: $fw-bold; - margin: 0 0 $m-v; -} - -@mixin h2 { - font-size: $fz-h2; - font-weight: $fw-bold; - margin: 0 0 $m-v; -} - -@mixin h3 { - font-size: $fz-h3; - font-weight: $fw-bold; - margin: 0 0 $m-v-small; -} - -@mixin h4 { - font-size: $fz-h4; - font-weight: $fw-bold; - margin: 0 0 $m-v-small; -} - -@mixin h5 { - font-size: $fz-h5; - font-weight: $fw-bold; - margin: 0 0 $m-v-small; -} - -@mixin text-link { - color: $c-text-link; - font-size: $fz-text-link; - text-decoration: $td-text-link; - - &:hover { - text-decoration: $td-hover-text-link; - } -} - -@mixin text-highlighted { - background-color: $c-highlighted; -} - -@mixin font-rendering { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; -} diff --git a/packages/sui-theme/src/classes.scss b/packages/sui-theme/src/classes.scss deleted file mode 100644 index ae9f8137e..000000000 --- a/packages/sui-theme/src/classes.scss +++ /dev/null @@ -1,2 +0,0 @@ -//Classes -@import './classes/index.scss'; diff --git a/packages/sui-theme/src/classes/README.md b/packages/sui-theme/src/classes/README.md deleted file mode 100644 index fea1e7c68..000000000 --- a/packages/sui-theme/src/classes/README.md +++ /dev/null @@ -1,32 +0,0 @@ -## Utility classes - -> ⚠️ This is a PoC. May change in the future without notice - -**Spacing classes** - -Provides a basic spacing classes library based in emmet convection. - -In your vertical theme import the library: - -```scss -@import '~/@s-ui/theme/lib/classes'; -``` - -This generates margin and padding spacing classes with basic SUI spacing variables - -```scss - .m-m { - margin: 8px; - } - .m-s { - margin: 4px; - } -... - .mt-m { - margin-top: 8px; - } - .mt-s { - margin-top: 4px; - } -... -``` diff --git a/packages/sui-theme/src/classes/_margins.scss b/packages/sui-theme/src/classes/_margins.scss deleted file mode 100644 index 222691f03..000000000 --- a/packages/sui-theme/src/classes/_margins.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import './../utils/spacing'; - -$m-sides: ('', 'top', 'right', 'bottom', 'left') !default; - -$m-sizes: ( - giant: $m-giant, - xxxl: $m-xxxl, - xxl: $m-xxl, - xl: $m-xl, - l: $m-l, - m: $m-m, - s: $m-s, - xs: $m-xs -) !default; - -@each $side in $m-sides { - @include create-space('margin', $side, $m-sizes); -} diff --git a/packages/sui-theme/src/classes/_paddings.scss b/packages/sui-theme/src/classes/_paddings.scss deleted file mode 100644 index 08e8bf304..000000000 --- a/packages/sui-theme/src/classes/_paddings.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import './../utils/spacing'; - -$p-sides: ('', 'top', 'right', 'bottom', 'left') !default; - -$p-sizes: ( - giant: $p-giant, - xxxl: $p-xxxl, - xxl: $p-xxl, - xl: $p-xl, - l: $p-l, - m: $p-m, - s: $p-s, - xs: $p-xs -) !default; - -@each $side in $p-sides { - @include create-space('padding', $side, $p-sizes); -} diff --git a/packages/sui-theme/src/classes/index.scss b/packages/sui-theme/src/classes/index.scss deleted file mode 100644 index 84007c094..000000000 --- a/packages/sui-theme/src/classes/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './margins'; -@import './paddings'; diff --git a/packages/sui-theme/src/components/_badge.scss b/packages/sui-theme/src/components/_badge.scss deleted file mode 100644 index c5a82f9e9..000000000 --- a/packages/sui-theme/src/components/_badge.scss +++ /dev/null @@ -1,39 +0,0 @@ -// sass-lint:disable no-important - -// --- SUI Badge Notification --- // -// @include sui-badge-notification(); -// @include sui-badge-notification($pseudo:true); -// Markup ---> data-notification-counter={5} - -@mixin sui-badge-notification-element { - background-color: $c-badge-notification; - border: $bd-badge-notification; - border-radius: $bdrs-rounded; - color: $c-white; - display: inline-block; - font-size: $fz-xs; - line-height: $size-badge-notification; - margin: $m-badge-notification; - min-height: $size-badge-notification; - min-width: $size-badge-notification; - padding: $p-badge-notification; - text-align: center; - text-shadow: $bxsh-base; -} - -@mixin sui-badge-notification($pseudo: false, $top: 0, $right: 0) { - @if $pseudo { - position: relative; - - &::before { - @include sui-badge-notification-element; - content: attr(data-notification-counter); - position: absolute; - right: $right; - top: $top; - } - } @else { - @include sui-badge-notification-element; - border: 0; - } -} diff --git a/packages/sui-theme/src/components/_button.scss b/packages/sui-theme/src/components/_button.scss deleted file mode 100644 index 3e1fb1cb5..000000000 --- a/packages/sui-theme/src/components/_button.scss +++ /dev/null @@ -1,225 +0,0 @@ -// sass-lint:disable no-important -// --- SUI Button --- // -// @include sui-button(); -// @include sui-button('secondary', 'small'); -// @include sui-button('ghost', 'large', 'full'); - -@mixin sui-button( - $type: 'primary', - $size: 'medium', - $layout: null, - $background-color: $c-gray-dark, - $color: $c-white, - $icon-fill: transparent, - $icon-stroke: $c-white -) { - align-items: center; - border: 0; - border-radius: $bdrs-button; - cursor: pointer; - display: flex; - font-family: inherit; - line-height: $lh-button; - outline: none; - padding: $p-v $p-h; - - &:disabled { - cursor: not-allowed; - opacity: $o-button-disabled; - } - - @if $type == 'primary' { - @include sui-button--primary; - } - @if $type == 'secondary' { - @include sui-button--secondary; - } - @if $type == 'ghost' { - @include sui-button--ghost; - } - @if $type == 'accent' { - @include sui-button--accent; - } - @if $type == 'flat' { - @include sui-button--flat; - } - @if $type == 'custom' { - @include sui-button--custom($background-color, $color, $icon-fill, $icon-stroke); - } - - @if $size == 'small' { - @include sui-button--small; - } - @if $size == 'medium' { - @include sui-button--medium; - } - @if $size == 'large' { - @include sui-button--large; - } - - @if $layout == 'full' { - @include sui-button--full; - } - - & > [class$='icon'], - & > [class$='Icon'] { - @if $size == 'small' { - @include sui-icon--small; - } - @if $size == 'medium' { - @include sui-icon--small; - } - @if $size == 'large' { - @include sui-icon--large; - } - - &:first-child { - margin-right: $m-h-small; - } - - &:last-child { - margin-left: $m-h-small; - } - } -} - -// Button types - -@mixin sui-button--primary { - background-color: $bgc-button-primary; - color: $c-button-primary; - - &:hover { - background-color: $bgc-button-primary-hover; - } - - &:active { - background-color: $bgc-button-primary-active; - } - - & > [class$='icon'], - & > [class$='Icon'] { - fill: $c-button-primary-icon-fill !important; - stroke: $c-button-primary-icon-stroke !important; - } -} - -@mixin sui-button--secondary { - background-color: $bgc-button-secondary; - box-shadow: 0 0 0 1px $bdc-button-secondary inset; - color: $c-button-secondary; - - &:hover { - background-color: $bgc-button-secondary-hover; - color: $c-button-secondary-hover; - } - - &:active { - background-color: $bgc-button-secondary-active; - } - - & > [class$='icon'], - & > [class$='Icon'] { - fill: $c-button-secondary-icon-fill !important; - stroke: $c-button-secondary-icon-stroke !important; - } -} - -@mixin sui-button--accent { - background-color: $bgc-button-accent; - color: $c-button-accent; - - &:hover { - background-color: $bgc-button-accent-hover; - } - - &:active { - background-color: $bgc-button-accent-active; - } - - & > [class$='icon'], - & > [class$='Icon'] { - fill: $c-button-accent-icon-fill !important; - stroke: $c-button-accent-icon-stroke !important; - } -} - -@mixin sui-button--ghost { - background-color: transparent; - box-shadow: 0 0 0 1px $bdc-button-ghost inset; - color: $c-button-ghost; - - &:hover { - box-shadow: 0 0 0 1px $bdc-button-ghost-hover inset; - color: $c-button-ghost-hover; - } - - &:active { - background-color: $bgc-button-ghost-active; - } - - & > [class$='icon'], - & > [class$='Icon'] { - fill: $c-button-ghost-icon-fill !important; - stroke: $c-button-ghost-icon-stroke !important; - } -} - -@mixin sui-button--flat { - background-color: transparent; - color: $c-button-flat; - - &:hover { - color: $c-button-flat-hover; - } - - &:active { - background-color: $bgc-button-flat-active; - } - - & > [class$='icon'], - & > [class$='Icon'] { - fill: $c-button-flat-icon-fill !important; - stroke: $c-button-flat-icon-stroke !important; - } -} - -@mixin sui-button--custom($background-color, $color, $icon-fill, $icon-stroke) { - background-color: $background-color; - color: $color; - - &:hover { - background-color: lighten($background-color, 15%); - } - - &:active { - background-color: darken($background-color, 10%); - } - - & > [class$='icon'], - & > [class$='Icon'] { - fill: $icon-fill !important; - stroke: $icon-stroke !important; - } -} - -// Button sizes - -@mixin sui-button--small { - font-size: $fz-s; -} - -@mixin sui-button--medium { - font-size: $fz-m; -} - -@mixin sui-button--large { - font-size: $fz-l; -} - -// Button layouts - -@mixin sui-button--full { - justify-content: center; - width: 100%; -} diff --git a/packages/sui-theme/src/components/_card.scss b/packages/sui-theme/src/components/_card.scss deleted file mode 100644 index 640d0aee1..000000000 --- a/packages/sui-theme/src/components/_card.scss +++ /dev/null @@ -1,72 +0,0 @@ -// sass-lint:disable class-name-format, no-important, no-warn - -// --- SUI Card --- // -// @include sui-card; - -@mixin sui-card { - background-color: $c-white; - border: 0; - border-radius: $bdrs-card; - box-shadow: $bxsh-card; - transition: box-shadow $trs-base; - - &:hover { - box-shadow: $bxsh-card-hover; - } - - &:hover &-title { - color: $c-card-title-hover; - } - - &.is-disabled { - opacity: 0.3; - } - - &-media { - position: relative; - - img { - height: auto; - vertical-align: bottom; - width: 100%; - } - - &Icon { - @include sui-icon--xlarge; - - fill: $c-card-article-icon-fill !important; - left: 50%; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - z-index: $z-card-article-icon; - } - } - - &-content { - padding: $p-v $p-h $p-v-large; - } - - &-title { - @include h3; - - &--primary { - color: $c-primary; - } - } - - &-description { - color: $c-card-article-description; - font-size: $fz-m; - } - - &-action { - margin-top: $m-m; - } -} - -// Card sizes (modifiers) - -@mixin sui-card--small { - @warn 'Modifier deprecated. You should use `sui-card` mixin instead.'; -} diff --git a/packages/sui-theme/src/components/_icon.scss b/packages/sui-theme/src/components/_icon.scss deleted file mode 100644 index 2181926fb..000000000 --- a/packages/sui-theme/src/components/_icon.scss +++ /dev/null @@ -1,21 +0,0 @@ -// Icon sizes - -@mixin sui-icon--small { - height: 16px; - width: 16px; -} - -@mixin sui-icon--medium { - height: 20px; - width: 20px; -} - -@mixin sui-icon--large { - height: 24px; - width: 24px; -} - -@mixin sui-icon--xlarge { - height: 48px; - width: 48px; -} diff --git a/packages/sui-theme/src/components/_input.scss b/packages/sui-theme/src/components/_input.scss deleted file mode 100644 index ccd031b34..000000000 --- a/packages/sui-theme/src/components/_input.scss +++ /dev/null @@ -1,47 +0,0 @@ -// sass-lint:disable class-name-format - -// --- SUI Input --- // -// @include sui-input; -// @include sui-input('large'); - -@mixin sui-input($size: 'medium') { - @include input-placeholder { - color: $c-input-placeholder; - font-style: $fs-input-placeholder; - } - - background-color: $bgc-input; - border: 0; - border-radius: $bdrs-input; - box-shadow: $bd-input; - color: $c-input; - font-family: inherit; - font-weight: $fw-light; - line-height: $lh-input; - outline: none; - padding: $p-v $p-h; - width: 100%; - - @if $size == 'medium' { - font-size: $fz-base; - } - @if $size == 'large' { - font-size: $fz-l; - } - - &:hover { - background-color: $bgc-input-hover; - box-shadow: $bd-input-hover; - color: $c-input-hover; - } - - &:focus { - background-color: $bgc-input-focus; - box-shadow: $bd-input-focus; - color: $c-input-focus; - } - - &.has-error { - box-shadow: 1px solid $c-error; - } -} diff --git a/packages/sui-theme/src/components/_select.scss b/packages/sui-theme/src/components/_select.scss deleted file mode 100644 index 03e5733e3..000000000 --- a/packages/sui-theme/src/components/_select.scss +++ /dev/null @@ -1,60 +0,0 @@ -// --- SUI Select --- // -// Markup: -//
-// -//
-//
-//
-// -// @include sui-select; -// @include sui-select('large'); - -@mixin sui-select($size: 'medium') { - @include appearance(none); - background-color: $bgc-select; - border: 0; - border-radius: $bdrs-base; - box-shadow: $bxsh-select; - display: inline-block; - font-family: inherit; - line-height: $lh-select; - outline: none; - padding: $p-v $p-h; - width: 100%; - - @if $size == 'medium' { - font-size: $fz-base; - } - @if $size == 'large' { - font-size: $fz-l; - } - - &-wrap { - position: relative; - } - - &-icon-wrap { - background-color: $bgc-select-icon-wrap; - border-bottom-right-radius: $bdrs-base; - border-top-right-radius: $bdrs-base; - bottom: 1px; - padding: $p-select-icon-wrap; - pointer-events: none; - position: absolute; - right: 1px; - top: 1px; - width: $w-select-icon-wrap; - } - - &:hover { - background-color: $bgc-select-hover; - box-shadow: $bxsh-select-hover; - } - - &:focus { - background-color: $bgc-select-focus; - box-shadow: $bxsh-select-focus; - } -} diff --git a/packages/sui-theme/src/components/_tabs.scss b/packages/sui-theme/src/components/_tabs.scss deleted file mode 100644 index 63fdea590..000000000 --- a/packages/sui-theme/src/components/_tabs.scss +++ /dev/null @@ -1,31 +0,0 @@ -// sass-lint:disable class-name-format - -// --- SUI Tab --- // -// @include sui-tab; - -@mixin sui-tab { - background-color: $bgc-tab; - border: $bd-tab; - color: $c-tab; - cursor: pointer; - display: inline-block; - font-size: $fz-m; - font-weight: $fw-tab; - margin-right: $mr-tab; - padding: $p-tab; - text-transform: $tt-tab; - - &-wrap { - border-bottom: $bd-tab-wrap; - } - - &:hover { - background-color: $bgc-tab-hover; - } - - &.is-active { - background-color: $bgc-tab-active; - box-shadow: $bxsh-tab-active; - color: $c-tab-active; - } -} diff --git a/packages/sui-theme/src/components/_tag.scss b/packages/sui-theme/src/components/_tag.scss deleted file mode 100644 index 702bd415e..000000000 --- a/packages/sui-theme/src/components/_tag.scss +++ /dev/null @@ -1,41 +0,0 @@ -// sass-lint:disable class-name-format - -// --- SUI Tag --- // -// @include sui-tag; - -@mixin sui-tag { - align-items: center; - background-color: $bgc-tag; - border: $bd-tag; - border-radius: $bdrs-tag; - color: $c-tag; - display: inline-flex; - font-size: $fz-tag; - line-height: $lh-tag; - margin-bottom: $m-h-xsmall; - margin-right: $m-h-small; - padding: $p-h-xsmall $p-h-small; -} - -@mixin sui-tag-link { - @include reset-link; - cursor: pointer; - font-weight: $fw-tag-link; - - &:hover { - background-color: $bgc-tag-hover; - border-color: $c-gray-dark; - } -} - -@mixin sui-tag-icon { - @include reset-button; - fill: $c-gray-light !important; - height: $lh-tag; - margin-left: $m-h-xsmall; - width: $lh-tag; - - &:hover { - fill: $c-accent !important; - } -} diff --git a/packages/sui-theme/src/components/atom/input/_placeholders.scss b/packages/sui-theme/src/components/atom/input/_placeholders.scss deleted file mode 100644 index 9bb1ba816..000000000 --- a/packages/sui-theme/src/components/atom/input/_placeholders.scss +++ /dev/null @@ -1,47 +0,0 @@ -@mixin sui-atom-input-input() { - background: $bgc-atom-input; - border: $bd-atom-input-base; - box-sizing: border-box; - color: $c-atom-input; - font-family: inherit; - font-size: $fz-atom-input; - padding-left: $pl-atom-input; - padding-right: $pr-atom-input; - width: 100%; -} - -@mixin sui-atom-input-input-focus() { - border: $bd-atom-input-focus; - box-shadow: $bxsh-atom-input; - outline: 0 none; -} - -@mixin sui-atom-input-select-focus() { - border: $bd-atom-select-focus; - box-shadow: $bxsh-atom-select-focus; - outline: $ol-atom-select-focus; - outline-offset: $olo-atom-select-focus; -} - -@mixin sui-molecule-autosuggest-focus() { - border: $bd-molecule-autosuggest-focus; - box-shadow: $bxsh-molecule-autosuggest-focus; - outline: $ol-molecule-autosuggest-focus; - outline-offset: $olo-molecule-autosuggest-focus; -} - -%sui-atom-input-input { - @include sui-atom-input-input; -} - -%sui-atom-input-input-focus { - @include sui-atom-input-input-focus; -} - -%sui-atom-input-select-focus { - @include sui-atom-input-select-focus; -} - -%sui-molecule-autosuggest-focus { - @include sui-molecule-autosuggest-focus; -} diff --git a/packages/sui-theme/src/components/atom/input/_settings.scss b/packages/sui-theme/src/components/atom/input/_settings.scss deleted file mode 100644 index 58c472490..000000000 --- a/packages/sui-theme/src/components/atom/input/_settings.scss +++ /dev/null @@ -1,35 +0,0 @@ -$pl-atom-input: $p-l !default; -$pr-atom-input: $p-l !default; - -$bxsh-atom-input-size: $bxsh-focus-size !default; -$bxsh-atom-input: $bxsh-focus !default; -$bd-atom-input: $bdw-s solid $c-primary !default; -$bd-atom-input-focus: $bd-atom-input !default; -$fz-atom-input: $fz-base !default; -$bgc-atom-input: $c-white !default; -$c-atom-input: initial !default; -$bd-atom-input-base: $bdw-s solid $c-gray-light !default; - -$bd-molecule-autosuggest-focus: $bd-atom-input !default; -$bxsh-molecule-autosuggest-focus: $bxsh-atom-input !default; -$ol-molecule-autosuggest-focus: 0 none !default; -$olo-molecule-autosuggest-focus: 0 !default; - -$bd-atom-select-focus: $bd-atom-input !default; -$bxsh-atom-select-focus: $bxsh-atom-input !default; -$ol-atom-select-focus: 0 none !default; -$olo-atom-select-focus: 0 !default; - -$h-atom-input--xl: 7 * $sz-base !default; // 56px -$h-atom-input--l: 6 * $sz-base !default; // 48px -$h-atom-input--m: 5 * $sz-base !default; // 40px -$h-atom-input--s: 4 * $sz-base !default; // 32px -$h-atom-input--xs: 3 * $sz-base !default; // 24px - -$c-atom-input--success: $c-success !default; -$c-atom-input--error: $c-error !default; -$c-atom-input--alert: $c-alert !default; - -$sizes-atom-input: xl $h-atom-input--xl, l $h-atom-input--l, m $h-atom-input--m, xs $h-atom-input--xs, - s $h-atom-input--s !default; -$states-atom-input: success $c-atom-input--success, error $c-atom-input--error, alert $c-atom-input--alert !default; diff --git a/packages/sui-theme/src/components/atom/input/index.scss b/packages/sui-theme/src/components/atom/input/index.scss deleted file mode 100644 index f42b40d8b..000000000 --- a/packages/sui-theme/src/components/atom/input/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './settings'; -@import './placeholders'; diff --git a/packages/sui-theme/src/components/thumbnail/_basic.scss b/packages/sui-theme/src/components/thumbnail/_basic.scss deleted file mode 100644 index ff5ed8718..000000000 --- a/packages/sui-theme/src/components/thumbnail/_basic.scss +++ /dev/null @@ -1,2 +0,0 @@ -$jc-thumbnail-basic-image: flex-start !default; -$ar-thumbnail-basic-image: auto !default; diff --git a/packages/sui-theme/src/icons/_arrow.scss b/packages/sui-theme/src/icons/_arrow.scss deleted file mode 100644 index a8b18ad3d..000000000 --- a/packages/sui-theme/src/icons/_arrow.scss +++ /dev/null @@ -1,31 +0,0 @@ -@mixin arrow-up($size: 12px, $color: $c-gray) { - border-bottom: $size solid $color; - border-left: $size solid transparent; - border-right: $size solid transparent; - height: 0; - width: 0; -} - -@mixin arrow-down($size: 12px, $color: $c-gray) { - border-left: $size solid transparent; - border-right: $size solid transparent; - border-top: $size solid $color; - height: 0; - width: 0; -} - -@mixin arrow-right($size: 12px, $color: $c-gray) { - border-bottom: $size solid transparent; - border-left: $size solid $color; - border-top: $size solid transparent; - height: 0; - width: 0; -} - -@mixin arrow-left($size: 12px, $color: $c-gray) { - border-bottom: $size solid transparent; - border-right: $size solid $color; - border-top: $size solid transparent; - height: 0; - width: 0; -} diff --git a/packages/sui-theme/src/index.scss b/packages/sui-theme/src/index.scss deleted file mode 100644 index abb5aa42a..000000000 --- a/packages/sui-theme/src/index.scss +++ /dev/null @@ -1,31 +0,0 @@ -// Utils -@import './utils'; -// Settings -@import './settings'; -// Default styles -@import './default'; -// Typography -@import './typography'; -// Reset -@import './reset'; - -// Components -@import './components/icon'; -@import './components/button'; -@import './components/input'; -@import './components/select'; -@import './components/tabs'; -@import './components/tag'; -@import './components/card'; -@import './components/badge'; - -@import './components/thumbnail/basic'; - -// SUI-Components -@import './components/atom/input/index'; - -// Icons -@import './icons/arrow'; -// Layout -@import './layout/grid'; -@import './layout/breakpoints'; diff --git a/packages/sui-theme/src/layout/_breakpoints.scss b/packages/sui-theme/src/layout/_breakpoints.scss deleted file mode 100644 index fa81bd93a..000000000 --- a/packages/sui-theme/src/layout/_breakpoints.scss +++ /dev/null @@ -1,11 +0,0 @@ -$breakpoints: ( - xxs: 0, - xs: 480px, - s: 600px, - m: 840px, - l: 960px, - xl: 1280px, - xxl: 1440px -) !default; - -$breakpoint-names: map-keys($breakpoints) !default; diff --git a/packages/sui-theme/src/layout/_grid.scss b/packages/sui-theme/src/layout/_grid.scss deleted file mode 100644 index ec5732d51..000000000 --- a/packages/sui-theme/src/layout/_grid.scss +++ /dev/null @@ -1,76 +0,0 @@ -// sass-lint:disable no-misspelled-properties - -// --- SUI Grid --- // -// @include sui-grid; -// @include sui-grid(false, false); // init default grid without gutter -// @include sui-grid-inline; // init inline grid with gutter -// @include sui-grid-inline(false); // init inline grid without gutter -// -// @include sui-cell; -// @include sui-cell-inline; -// or... -// @include sui-cell-of(2); -// -// Custom gutter: -// @include sui-grid($gutter: $custom-gutter) -// @include sui-cell-of($col-num, $gutter: $custom-gutter) - -// Grid -@use 'sass:math'; - -@mixin sui-grid($add-gutter: true, $inline: false, $gutter: $gutter) { - display: flex; - - @if $add-gutter == true { - padding: 0 $gutter $gutter; - } - - @if $inline == true { - -webkit-overflow-scrolling: touch; - overflow-x: scroll; - } @else { - flex-wrap: wrap; - } -} - -@mixin sui-grid-inline($add-gutter) { - @include sui-grid($add-gutter, $inline: true); -} - -// Cell -@mixin sui-cell($inline: false, $gutter: $gutter) { - flex: 1; - margin: 0; - padding: 0; - - @if $inline == true { - margin-right: $gutter; - - & > * { - height: 100%; - } - } @else { - &:not(:last-child) { - margin-right: $gutter; - } - } -} - -@mixin sui-cell-inline { - @include sui-cell($inline: true); -} - -@mixin sui-cell-of($col-num, $gutter: $gutter) { - $w-content: math.div(100%, $col-num); - - @include sui-cell($gutter: $gutter); - flex-basis: calc(#{$w-content} - #{$gutter}); - - &:nth-child(#{$col-num}n) { - margin-right: 0; - } - - &:not(:nth-last-child(-n + #{$col-num})) { - margin-bottom: $gutter; - } -} diff --git a/packages/sui-theme/src/settings-compat-v7/_animation.scss b/packages/sui-theme/src/settings-compat-v7/_animation.scss deleted file mode 100644 index 914e0470d..000000000 --- a/packages/sui-theme/src/settings-compat-v7/_animation.scss +++ /dev/null @@ -1,7 +0,0 @@ -// --- Animation --- // - -// Transitions -$trsdu-base: 0.3s !default; -$trsdu-slow: $trsdu-base * 2 !default; -$trsdu-fast: $trsdu-base * 0.5 !default; -$trs-base: $trsdu-base ease !default; diff --git a/packages/sui-theme/src/settings-compat-v7/_box-style.scss b/packages/sui-theme/src/settings-compat-v7/_box-style.scss deleted file mode 100644 index c1b21c1f3..000000000 --- a/packages/sui-theme/src/settings-compat-v7/_box-style.scss +++ /dev/null @@ -1,9 +0,0 @@ -// --- Box Style --- // - -// Border radius -$bdrs-none: 0 !default; -$bdrs-small: ceil(4px * 0.5) !default; - -// Box shadows -$bxsh-spread: 3px !default; -$bxsh-base: 0 1px $bxsh-spread rgba($c-black, 0.15) !default; diff --git a/packages/sui-theme/src/settings-compat-v7/_color.scss b/packages/sui-theme/src/settings-compat-v7/_color.scss deleted file mode 100644 index 99a499f56..000000000 --- a/packages/sui-theme/src/settings-compat-v7/_color.scss +++ /dev/null @@ -1,11 +0,0 @@ -// --- Colors --- // -// This is a layer to maintain compatiblity with version 7- - -// Colors non-existing in the new color palette -$c-highlighted: #f2cd96 !default; // seem not used -$c-featured: #ffe613 !default; // used as category tag -$c-white: #ffffff !default; // not semantic -$c-black: #000000 !default; // not semantic - -// Colors renamed in the new color palette -$c-warning: #f5a623 !default; // This color corresponds to $c-alert diff --git a/packages/sui-theme/src/settings-compat-v7/_components.scss b/packages/sui-theme/src/settings-compat-v7/_components.scss deleted file mode 100644 index b18941f3f..000000000 --- a/packages/sui-theme/src/settings-compat-v7/_components.scss +++ /dev/null @@ -1,373 +0,0 @@ -// --- Forms --- // - -// Inputs -@use 'sass:math'; - -$bgc-input: $c-white !default; -$bgc-input-hover: $c-white !default; -$bgc-input-focus: $c-gray-lightest !default; -$bdrs-input: $bdrs-base !default; -$c-input: $c-text-base !default; -$c-input-focus: $c-text-base !default; -$c-input-hover: $c-text-base !default; -$c-input-placeholder: $c-gray !default; -$ff-input-placeholder: $ff-sans-serif !default; -$fs-input-placeholder: italic !default; -$lh-input: $lh-base !default; - -$bd-input: 0 0 0 1px $c-gray inset !default; -$bd-input-hover: 0 0 0 1px $c-gray inset !default; -$bd-input-focus: 0 0 0 1px $c-gray inset !default; - -// Radio List -$bd-radio-list: 1px solid $c-gray !default; -$bdrs-radio-list: $bdrs-base !default; - -$bgc-radio-list-checked: $c-primary !default; -$bgc-radio-list: $c-white !default; - -$c-radio-list-checked: $c-white !default; -$p-radio-list: $p-v $p-h !default; - -// Selects -$bgc-select: $c-white !default; -$bgc-select-hover: $c-white !default; -$bgc-select-focus: $c-gray-lightest !default; -$lh-select: $lh-base !default; - -$bgc-select-icon-wrap: $c-gray-lightest !default; -$p-select-icon-wrap: 0 $p-h-small !default; -$w-select-icon-wrap: 30px !default; - -$bxsh-select: 0 0 0 1px $c-gray inset !default; -$bxsh-select-hover: 0 0 0 1px $c-gray inset !default; -$bxsh-select-focus: 0 0 0 1px $c-gray inset !default; - -// --- Components --- // - -// Ads -$h-ad-l-top: auto !default; -$w-ad-l-top: 980px !default; -$h-ad-l-right: 600px !default; -$w-ad-l-right: 300px !default; -$mih-ad-l-top: 0 !default; - -// Alert Basic -$bdrs-alert-basic: 0 !default; -$bxsh-alert-basic: $bxsh-base !default; -$c-alert-basic-link: $c-primary !default; - -$c-alert-basic-info: $c-primary !default; -$bd-alert-basic-info: 0 !default; -$bdl-alert-basic-info: $bdw-l solid $c-alert-basic-info !default; -$bgc-alert-basic-info: $c-white !default; - -$c-alert-basic-error: $c-error !default; -$bd-alert-basic-error: 0 !default; -$bdl-alert-basic-error: $bdw-l solid $c-alert-basic-error !default; -$bgc-alert-basic-error: $c-white !default; - -$c-alert-basic-success: $c-success !default; -$bd-alert-basic-success: 0 !default; -$bdl-alert-basic-success: $bdw-l solid $c-alert-basic-success !default; -$bgc-alert-basic-success: $c-white !default; - -// Badge -$c-badge-notification: $c-primary !default; -$size-badge-notification: 18px !default; -$p-badge-notification: 0 5px !default; -$m-badge-notification: 0 0 0 10px !default; -$bd-badge-notification: $bdw-m solid $c-white !default; - -// Button -$bdrs-button: 0 !default; -$lh-button: $lh-base !default; -$o-button-disabled: 0.4 !default; - -$c-button-primary: $c-white !default; -$c-button-primary-icon-fill: $c-white !default; -$c-button-primary-icon-stroke: transparent !default; -$bgc-button-primary: $c-primary !default; -$bgc-button-primary-hover: $c-primary-light !default; -$bgc-button-primary-active: $c-primary-dark !default; - -$c-button-secondary: $c-gray-dark !default; -$c-button-secondary-hover: $c-gray-dark !default; -$c-button-secondary-icon-fill: $c-gray-dark !default; -$c-button-secondary-icon-stroke: transparent !default; -$bdc-button-secondary: $c-gray-dark !default; -$bgc-button-secondary: $c-white !default; -$bgc-button-secondary-hover: $c-gray-lightest !default; -$bgc-button-secondary-active: $c-gray-light !default; - -$c-button-accent: $c-white !default; -$c-button-accent-icon-fill: $c-white !default; -$c-button-accent-icon-stroke: transparent !default; -$bgc-button-accent: $c-accent !default; -$bgc-button-accent-hover: $c-accent-light !default; -$bgc-button-accent-active: $c-accent-dark !default; - -$c-button-ghost: $c-gray-dark !default; -$c-button-ghost-hover: $c-gray !default; -$c-button-ghost-icon-fill: $c-gray-dark !default; -$c-button-ghost-icon-stroke: transparent !default; -$bdc-button-ghost: $c-gray-dark !default; -$bdc-button-ghost-hover: $c-gray !default; -$bgc-button-ghost-active: $c-gray !default; - -$c-button-flat: $c-gray-dark !default; -$c-button-flat-hover: $c-gray !default; -$c-button-flat-icon-fill: $c-gray-dark !default; -$c-button-flat-icon-stroke: transparent !default; -$bgc-button-flat-active: $c-gray !default; - -// Card -$bdc-article-featured: $c-featured !default; -$bd-article-featured: $bdw-l solid $bdc-article-featured !default; -$bdrs-card: 0 !default; -$bxsh-card: $bxsh-base !default; -$bxsh-card-hover: 0 1px 6px 2px rgba($c-black, 0.15) !default; -$c-card-article-description: inherit !default; -$c-card-article-icon-fill: $c-white !default; -$c-card-title-hover: inherit !default; -$z-card-article-icon: 1 !default; - -// Card composable -$bgc-card-composable: $c-white !default; -$p-card-composable-primary: 0 !default; -$p-card-composable-secondary: $p-base !default; - -// Card product -$c-card-product-title: $c-primary !default; -$c-card-product-favorited: $c-primary !default; -$c-card-product-slider-nav-icon: $c-primary !default; -$size-card-product-slider-nav-icon: 30px !default; - -// Card subscription -$bg-card-subscription-image: none !default; -$bgc-card-subscription-content: $c-white !default; -$c-card-subscription-icon: $c-white !default; -$c-card-subscription-title: $c-gray !default; -$fz-card-subscription-input: $fz-base !default; -$h-card-subscription-image: 0 !default; -$pt-card-subscription: 0 !default; -$t-card-subscription-image: 0 !default; -$type-card-subscription-button: 'primary' !default; - -// Cookie banner -$bgc-cookie-banner: $c-gray-lightest !default; -$c-cookie-banner: $c-gray !default; -$fz-cookie-banner: $fz-s !default; -$z-cookie-banner: 50 !default; - -$maw-cookie-banner-content: $w-layout-large !default; -$p-cookie-banner-content: $p-v $p-h !default; -$ta-cookie-banner-context: center !default; - -$c-cookie-banner-link: $c-primary !default; - -$c-cookie-banner-close-icon: $c-gray-dark !default; -$c-cookie-banner-close-icon-hover: $c-gray !default; - -// Dropdown -$c-dropdown-button-large: $c-text-base !default; -$bdt-dropdown-menu: $bdw-s solid $c-primary !default; -$bgc-dropdown-button-hover: $c-white !default; -$bgc-dropdown-menu-hover: $c-white !default; -$bgc-dropdown-menu: $c-gray-lightest !default; -$bxsh-dropdown-menu: $bxsh-base !default; -$c-dropdown-arrow: transparent !default; -$size-dropdown-arrow-up: 0 !default; -$size-dropdown-icon: 18px !default; -$z-dropdown-menu: 1 !default; - -// Dropdown basic -$bdrs-dropdown-basic-menu: 0 !default; -$c-dropdown-basic-button-hover: $c-accent !default; -$c-dropdown-basic-button-icon: $c-accent !default; -$c-dropdown-basic-list-link: $c-accent !default; -$fw-dropdown-basic-button: inherit !default; - -// Dropdown user -$bd-dropdown-user-last-item: 1px solid $c-gray-light !default; -$bdrs-dropdown-user-menu: 0 !default; -$bg-dropdown-user-button: $c-gray !default; -$bgc-dropdown-user: $c-white !default; -$c-dropdown-user-icon-highlight: $c-accent !default; -$c-dropdown-user-icon-hover: $c-accent !default; -$c-dropdown-user-link-highlight: $c-accent !default; -$c-dropdown-user-text-large: $c-text-base !default; -$w-dropdown-user-avatar: 48px !default; -$w-dropdown-user-text: 100px !default; - -// Form Autocompleted -$bd-form-autocompleted: $bdw-s solid $c-gray !default; -$bdr-form-autocompleted: $bdrs-base !default; -$bgc-form-autocompleted-item-active: $c-gray-lightest !default; -$bgc-form-autocompleted-item-hover: $c-gray-lightest !default; -$bgc-form-autocompleted: $c-white !default; -$c-form-autocompleted-submit-icon: $c-white !default; -$ml-form-autocompleted-submit: $m-h !default; -$mt-form-autocompleted: 3px !default; -$p-form-autocompleted-item: $p-v $p-h !default; -$r-form-autocompleted-clear: 12px !default; -$t-form-autocompleted-clear: 50% !default; -$trf-form-autocompleted-clear: translateY(-50%) !default; -$z-form-autocompleted-suggests: 1 !default; -$type-form-autocompleted-submit: 'primary' !default; - -// Modal -$bg-modal: rgba(0, 0, 0, 0.6) !default; - -// Modal Basic -$bd-modal-basic: 0 !default; -$bg-modal-basic: $bg-modal !default; -$bxsh-modal-basic: $bxsh-base !default; -$m-modal-basic: $m-base !default; -$maw-modal-basic: 50% !default; -$p-modal-basic: $p-base !default; -$w-modal-basic: auto !default; -$z-modal-basic: 100 !default; -$c-modal-basic-icon: $c-black !default; -$h-modal-basic-icon: 16px !default; -$w-modal-basic-icon: 16px !default; -$bg-modal-basic-dialog: $c-white !default; -$bg-modal-basic-header: transparent !default; -$c-modal-basic-header: inherit !default; -$p-modal-basic-header: $p-base !default; -$m-modal-basic-header: $p-modal-basic-header !default; -$bd-modal-basic-content: $bdrs-s solid $c-gray-light !default; -$p-modal-basic-content: $p-base !default; -$p-modal-basic-footer: $p-base !default; - -// Search box -$bg-search-box: $c-gray-light !default; - -// Section -$c-section-basic-main-title: $c-black !default; -$c-section-basic-subtitle: $c-gray-light !default; -$c-section-basic-content-text-paragraph: $c-gray !default; -$fz-section-basic-title: $fz-h3 !default; -$fz-section-basic-subtitle: $fz-h5 !default; -$fz-section-basic-content-text-paragraph: $fz-m !default; -$lh-section-basic-paragraph: $lh-base !default; -$mb-section-basic: $m-v-xlarge * 2 !default; -$mb-section-basic-header: $m-v-xlarge !default; -$m-v-section-basic-content-text-paragraph: $m-v-large !default; -$bd-section-basic-line-separator: $bdrs-s solid $c-gray-lightest !default; - -// Smartbanner -$bgc-ad-smartbanner: $c-white !default; -$bb-ad-smartbanner: $bdrs-s solid $c-gray-light !default; -$h-ad-smartbanner: 70px !default; -$t-ad-smartbanner: 0 !default; -$b-ad-smartbanner: auto !default; -$l-ad-smartbanner: 0 !default; -$z-ad-smartbanner: 10 !default; -$m-ad-smartbanner-logo: 0 $m-h-small !default; -$w-ad-smartbanner-logo: 50px !default; -$h-ad-smartbanner-logo: 50px !default; -$bdrs-ad-smartbanner-logo: 0 !default; -$bgc-ad-smartbanner-button-install: $c-primary !default; -$c-ad-smartbanner-button-color: $c-white !default; -$w-ad-smartbanner-button-close-icon: 10px !default; -$h-ad-smartbanner-button-close-icon: 10px !default; -$c-ad-smartbanner-button-close-icon: grey !default; -$m-ad-smartbanner-button-close-container: 0 $m-h-small !default; -$fz-ad-smartbanner-title: $fz-h5 !default; -$fw-ad-smartbanner-title: $fw-bold !default; -$m-ad-smartbanner-title: 0 0 $m-v-xsmall 0 !default; -$fz-ad-smartbanner-text: $fz-s !default; -$m-ad-smartbanner-text: 0 0 $m-v-xsmall 0 !default; -$p-ad-smartbanner-secondary: $p-v $p-h-small !default; -$p-ad-smartbanner-rating-container: 0 !default; -$c-ad-smartbanner-rating-icon: #f39c12 !default; - -// Spinner -$c-spinner: $c-primary !default; -$m-spinner: $m-h-xsmall !default; -$op-spinner: 0.45 !default; -$animdur-spinner: 1500ms !default; -$animic-spinner: infinite !default; -$animtf-spinner: linear !default; - -$size-spinner-l: 60px !default; -$bdw-spinner-l: 3px !default; -$size-spinner-m: 30px !default; -$bdw-spinner-m: $bdw-m !default; -$size-spinner-s: 15px !default; -$bdw-spinner-s: $bdw-s !default; - -// Tabs -$bd-tab-wrap: $bdw-s solid $c-gray-light !default; -$bd-tab: 0 !default; -$bgc-tab: $c-white !default; -$c-tab: $c-text-base !default; -$fw-tab: $fw-semi-bold !default; -$mr-tab: 0 !default; -$p-tab: $p-v * 1.5 $p-h !default; -$tt-tab: uppercase !default; - -$bgc-tab-hover: $c-white !default; - -$bgc-tab-active: $c-white !default; -$bxsh-tab-active: 0 -4px 0 $c-primary inset !default; -$c-tab-active: $c-primary !default; - -// Tag -$c-tag: $c-text-base !default; -$c-tag-selected: $c-text-base !default; -$bd-tag: $bdw-s solid $c-gray-light !default; -$bd-tag-selected: $bdw-s solid $c-primary !default; -$bgc-tag: $c-white !default; -$bgc-tag-hover: $c-white !default; -$bgc-tag-selected: $c-white !default; -$bdrs-tag: $bdrs-base !default; -$fz-tag: $fz-s !default; -$fw-tag-link: $fw-regular !default; -$lh-tag: 1.5em !default; -$size-tag-icon: 14px !default; - -// Title -$c-title-basic-main-title: $c-primary !default; -$c-title-basic-subtitle: $c-primary !default; - -// Tooltip basic -$bdr-tooltip-basic: 0 !default; -$bdw-tooltip-basic-arrow: $bdw-l !default; -$fz-tooltip-basic: $fz-base !default; -$w-toolip-basic-arrow: 12px !default; -$p-toolip-basic: $p-v $p-h !default; -$trs-toolip-basic: opacity $trsdu-base ease-out !default; -$bxsh-toolip-basic: $bxsh-base !default; -$maw-tooltip-basic: 300px !default; - -$bgc-tooltip-basic-dark: $c-white !default; -$c-tooltip-basic-dark: $c-text-base !default; -$bdc-tooltip-basic-dark: $c-gray !default; - -$bgc-tooltip-basic-success: $c-white !default; -$c-tooltip-basic-success: $c-text-base !default; -$bdc-tooltip-basic-success: $c-success !default; - -$bgc-tooltip-basic-error: $c-white !default; -$c-tooltip-basic-error: $c-text-base !default; -$bdc-tooltip-basic-error: $c-error !default; - -$bgc-tooltip-basic-info: $c-white !default; -$c-tooltip-basic-info: $c-text-base !default; -$bdc-tooltip-basic-info: $c-accent !default; - -// Thumbnail -$bgc-thumbnail-basic: $c-white !default; -$bd-thumbnail-basic: $bdw-s solid $c-gray-lightest !default; -$bdrs-thumbnail-basic: 0 !default; -$p-thumbnail-basic: $p-xxsmall !default; -$bgc-thumbnail-basic-caption: $c-black !default; -$c-thumbnail-basic-caption: $c-white !default; -$fz-thumbnail-basic-caption: $fz-h4 !default; -$trs-thumbnail-basic: $trsdu-slow ease-in-out !default; -$p-thumbnail-basic-caption: ceil(math.div($p-base, 3)) !default; - -// List -$m-list-gutter: $m-h !default; diff --git a/packages/sui-theme/src/settings-compat-v7/_font.scss b/packages/sui-theme/src/settings-compat-v7/_font.scss deleted file mode 100644 index 6104a0d63..000000000 --- a/packages/sui-theme/src/settings-compat-v7/_font.scss +++ /dev/null @@ -1,40 +0,0 @@ -// --- Strip number --- // -// Necessary to support $fz definitions either with or without units -@use 'sass:math'; - -@function strip-unit($number) { - @if type-of($number) == 'number' and not unitless($number) { - @return math.div($number, $number * 0 + 1); - } - - @return $number; -} - -// --- Fonts and typography --- // - -// Font weights -$fw-semi-bold: 600 !default; - -// Font sizes -$fz-base: 14 !default; -$fz-body: strip-unit($fz-base) * 1px !default; -$fz-xs: strip-unit(ceil($fz-base * 0.666)) * 1px !default; -$fz-s: strip-unit(ceil($fz-base * 0.8)) * 1px !default; -$fz-m: strip-unit($fz-base) * 1px !default; -$fz-l: strip-unit(ceil($fz-base * 1.25)) * 1px !default; -$fz-xl: strip-unit(ceil($fz-base * 1.75)) * 1px !default; - -// Font sizes for headings -$fz-h1: 32px !default; -$fz-h2: 24px !default; -$fz-h3: 18px !default; -$fz-h4: 14px !default; -$fz-h5: 12px !default; - -// Line heights -$lh-base: 1.715 !default; - -// Text link -$td-text-link: underline !default; -$td-hover-text-link: none !default; -$fz-text-link: null !default; diff --git a/packages/sui-theme/src/settings-compat-v7/_index.scss b/packages/sui-theme/src/settings-compat-v7/_index.scss deleted file mode 100644 index fbf45e4ca..000000000 --- a/packages/sui-theme/src/settings-compat-v7/_index.scss +++ /dev/null @@ -1,39 +0,0 @@ -// # Theme Variables -// -------------------------------------------------- -// The naming convention used for variables is based on Emmet. -// See [Emmet cheat sheet](http://docs.emmet.io/cheat-sheet/) -// -// Some of the prefixes used: -// * bg = background -// * bgc = background-color -// * c = color -// * ff = font-family -// * fw = font-weight -// * fz = font-size -// * lh = line-height -// * m = margin -// * maw = max-width -// * p = padding -// * ta = text-align -// * z = z-index - -// URLs -// Note: This URL must be overwritten in your own component/site styles. -$url-statics: 'https://statics.sui-cdn.com/' !default; - -@import './color'; -@import '../settings/color'; - -@import './font'; -@import '../settings/font'; - -@import './box-style'; -@import '../settings/box-style'; - -@import './spacing'; -@import '../settings/spacing'; -@import '../settings/size'; - -@import './animation'; -@import './layout'; -@import './components'; diff --git a/packages/sui-theme/src/settings-compat-v7/_layout.scss b/packages/sui-theme/src/settings-compat-v7/_layout.scss deleted file mode 100644 index 65979dc0b..000000000 --- a/packages/sui-theme/src/settings-compat-v7/_layout.scss +++ /dev/null @@ -1,72 +0,0 @@ -// --- Layout --- // - -$w-layout: 980px !default; -$w-layout-large: 1280px !default; - -// Breakpoints -$breakpoints: ( - xxs: 0, - xs: 320px, - s: 576px, - m: 768px, - l: 992px, - xl: 1200px -) !default; -$breakpoint-names: map-keys($breakpoints) !default; - -// Breakpoint viewport sizes and media queries. -// -// Breakpoints are defined as a map of (name: minimum width), order from small to large: -// -// (xxs: 0, xs: 320px, sm: 576px, md: 768px) - -// Name of the next breakpoint, or null for the last breakpoint. -// -// >> breakpoint-next(sm) -// md -@function breakpoint-next($name) { - $n: index($breakpoint-names, $name); - @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); -} - -// Maximum breakpoint width. Null for the largest (last) breakpoint. -// The maximum value is calculated as the minimum of the next one less 0.1. -// -// >> breakpoint-max(sm) -// 767px -@function breakpoint-max($name) { - $next: breakpoint-next($name); - @return if($next, breakpoint-min($next) - 1px, null); -} - -// Media of at most the maximum breakpoint width. No query for the largest breakpoint. -// Makes the @content apply to the given breakpoint and narrower. -@mixin media-breakpoint-down($name) { - $max: breakpoint-max($name); - @if $max { - @media (max-width: $max) { - @content; - } - } @else { - @content; - } -} - -// Media that spans multiple breakpoint widths. -// Makes the @content apply between the min and max breakpoints -@mixin media-breakpoint-between($lower, $upper) { - @include media-breakpoint-up($lower) { - @include media-breakpoint-down($upper) { - @content; - } - } -} - -// Media between the breakpoint's minimum and maximum widths. -// No minimum for the smallest breakpoint, and no maximum for the largest one. -// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. -@mixin media-breakpoint-only($name) { - @include media-breakpoint-between($name, $name) { - @content; - } -} diff --git a/packages/sui-theme/src/settings-compat-v7/_spacing.scss b/packages/sui-theme/src/settings-compat-v7/_spacing.scss deleted file mode 100644 index b24677a2e..000000000 --- a/packages/sui-theme/src/settings-compat-v7/_spacing.scss +++ /dev/null @@ -1,34 +0,0 @@ -// Margins -@use 'sass:math'; - -$m-base: 16px !default; -$m-v: ceil($m-base * 0.5) !default; // 8px -$m-h: $m-base !default; // 16px -$m-v-xsmall: ceil(math.div($m-v, 3)) !default; // 3px -$m-h-xsmall: ceil(math.div($m-h, 3)) !default; // 6px -$m-v-small: ceil($m-v * 0.5) !default; // 4px -$m-h-small: ceil($m-h * 0.5) !default; // 8px -$m-v-large: ceil($m-v * 2) !default; // 16px -$m-h-large: ceil($m-h * 2) !default; // 32px -$m-v-xlarge: ceil($m-v * 3) !default; // 24px -$m-h-xlarge: ceil($m-h * 3) !default; // 48px - -// Paddings -$p-base: 16px !default; -$p-small: ceil($p-base * 0.5) !default; // 8px -$p-xsmall: ceil(math.div($p-base, 3)) !default; // 6px -$p-xxsmall: ceil($p-base * 0.25) !default; // 4px -$p-v: ceil($p-base * 0.5) !default; // 8px -$p-h: $p-base !default; // 16px -$p-v-xsmall: ceil(math.div($p-v, 3)) !default; // 3px -$p-h-xsmall: ceil(math.div($p-h, 3)) !default; // 6px -$p-v-small: ceil($p-v * 0.5) !default; // 4px -$p-h-small: ceil($p-h * 0.5) !default; // 8px -$p-v-large: ceil($p-v * 2) !default; // 16px -$p-h-large: ceil($p-h * 2) !default; // 32px -$p-v-xlarge: ceil($p-v * 3) !default; // 24px -$p-h-xlarge: ceil($p-h * 3) !default; // 48px - -// Gutter -$gutter: $p-base !default; -$gutter-s: $gutter * 0.5 !default; diff --git a/packages/sui-theme/src/settings/_box-style.scss b/packages/sui-theme/src/settings/_box-style.scss deleted file mode 100644 index 610a82d69..000000000 --- a/packages/sui-theme/src/settings/_box-style.scss +++ /dev/null @@ -1,34 +0,0 @@ -// --- Box Style --- // - -// Border radius -$bdrs-base: 8px !default; -$bdrs-none: 0 !default; -$bdrs-circle: 999px !default; - -$bdrs-xxxl: $bdrs-base * 4 !default; // 32 px -$bdrs-xxl: $bdrs-base * 2 !default; // 16 px -$bdrs-xl: $bdrs-base !default; // 8 px -$bdrs-l: $bdrs-base * 0.5 !default; // 4 px -$bdrs-m: $bdrs-base * 0.25 !default; // 2 px -$bdrs-s: $bdrs-base * 0.125 !default; // 1 px - -$bdrs-rounded: 50% !default; - -// Border widths -$bdw-base: 8px !default; - -$bdw-xxxl: $bdw-base * 4 !default; // 32 px -$bdw-xxl: $bdw-base * 2 !default; // 16 px -$bdw-xl: $bdw-base !default; // 8 px -$bdw-l: $bdw-base * 0.5 !default; // 4 px -$bdw-m: $bdw-base * 0.25 !default; // 2 px -$bdw-s: $bdw-base * 0.125 !default; // 1 px - -// Box shadows -$bxsh-s: 0 1px 1px 0 rgba(0, 0, 0, 0.24) !default; -$bxsh-m: 0 1px 4px 0 rgba(0, 0, 0, 0.24) !default; -$bxsh-l: 0 3px 8px 0 rgba(0, 0, 0, 0.16) !default; - -// Box shadows focus -$bxsh-focus-size: 0 0 3px 0 !default; -$bxsh-focus: $bxsh-focus-size $c-primary !default; diff --git a/packages/sui-theme/src/settings/_color.scss b/packages/sui-theme/src/settings/_color.scss deleted file mode 100644 index 7291bbcaa..000000000 --- a/packages/sui-theme/src/settings/_color.scss +++ /dev/null @@ -1,175 +0,0 @@ -// --- Colors --- // -// -// Prefixes used: -// * c = color - -@import '../utils/colors'; - -// Shade step {color}-light or {color}-dark variation -$c-dark-step: -2 !default; -$c-light-step: 2 !default; - -/////////////////////////////////////////////////////////////////////////////// -// Color Palette -/////////////////////////////////////////////////////////////////////////////// - -// System color -$c-system: #000000 !default; - -// Primary color -$c-primary: #2b91c1 !default; - -// Old primary color gradients, keeping them for retro compatibility -$c-primary-light: color-variation($c-primary, $c-light-step) !default; -$c-primary-dark: color-variation($c-primary, $c-dark-step) !default; - -// Primary color light gradients -$c-primary-light-1: color-variation($c-primary, 1) !default; -$c-primary-light-2: color-variation($c-primary, 2) !default; -$c-primary-light-3: color-variation($c-primary, 3) !default; -$c-primary-light-4: color-variation($c-primary, 4) !default; -$c-primary-light-5: color-variation($c-primary, 5) !default; - -// Primary color dark gradients -$c-primary-dark-1: color-variation($c-primary, -1) !default; -$c-primary-dark-2: color-variation($c-primary, -2) !default; -$c-primary-dark-3: color-variation($c-primary, -3) !default; -$c-primary-dark-4: color-variation($c-primary, -4) !default; - -// Secondary/Accent color -$c-accent: #d57c1b !default; -$c-secondary: #d57c1b !default; - -// Old Secondary/Accent color gradients, keeping them for retro compatibility -$c-accent-light: color-variation($c-accent, $c-light-step) !default; -$c-accent-dark: color-variation($c-accent, $c-dark-step) !default; -$c-secondary-light: color-variation($c-secondary, $c-light-step) !default; -$c-secondary-dark: color-variation($c-secondary, $c-dark-step) !default; - -// Secondary/Accent color light gradients -$c-accent-light-1: color-variation($c-accent, 1) !default; -$c-accent-light-2: color-variation($c-accent, 2) !default; -$c-accent-light-3: color-variation($c-accent, 3) !default; -$c-accent-light-4: color-variation($c-accent, 4) !default; -$c-accent-light-5: color-variation($c-accent, 5) !default; -$c-secondary-light-1: color-variation($c-secondary, 1) !default; -$c-secondary-light-2: color-variation($c-secondary, 2) !default; -$c-secondary-light-3: color-variation($c-secondary, 3) !default; -$c-secondary-light-4: color-variation($c-secondary, 4) !default; -$c-secondary-light-5: color-variation($c-secondary, 5) !default; - -// Secondary/Accent color dark gradients -$c-accent-dark-1: color-variation($c-accent, -1) !default; -$c-accent-dark-2: color-variation($c-accent, -2) !default; -$c-accent-dark-3: color-variation($c-accent, -3) !default; -$c-accent-dark-4: color-variation($c-accent, -4) !default; -$c-secondary-dark-1: color-variation($c-secondary, -1) !default; -$c-secondary-dark-2: color-variation($c-secondary, -2) !default; -$c-secondary-dark-3: color-variation($c-secondary, -3) !default; -$c-secondary-dark-4: color-variation($c-secondary, -4) !default; - -// Gray color -$c-gray: #777777 !default; - -// Old Gray color gradients, keeping them for retro compatibility -$c-gray-light: color-variation($c-gray, $c-light-step) !default; -$c-gray-dark: color-variation($c-gray, $c-dark-step) !default; -$c-gray-lightest: color-variation($c-gray, 4) !default; - -// Gray color light gradients -$c-gray-light-1: color-variation($c-gray, 1) !default; -$c-gray-light-2: color-variation($c-gray, 2) !default; -$c-gray-light-3: color-variation($c-gray, 3) !default; -$c-gray-light-4: color-variation($c-gray, 4) !default; -$c-gray-light-5: color-variation($c-gray, 5) !default; - -// Gray color dark gradients -$c-gray-dark-1: color-variation($c-gray, -1) !default; -$c-gray-dark-2: color-variation($c-gray, -2) !default; -$c-gray-dark-3: color-variation($c-gray, -3) !default; -$c-gray-dark-4: color-variation($c-gray, -4) !default; - -// Success color -$c-success: #00a544 !default; - -// Old Success color gradients, keeping them for retro compatibility -$c-success-light: color-variation($c-success, $c-light-step) !default; -$c-success-dark: color-variation($c-success, $c-dark-step) !default; - -// Secondary/Accent color light gradients -$c-success-light-1: color-variation($c-success, 1) !default; -$c-success-light-2: color-variation($c-success, 2) !default; -$c-success-light-3: color-variation($c-success, 3) !default; -$c-success-light-4: color-variation($c-success, 4) !default; -$c-success-light-5: color-variation($c-success, 5) !default; - -// Secondary/Accent color dark gradients -$c-success-dark-1: color-variation($c-success, -1) !default; -$c-success-dark-2: color-variation($c-success, -2) !default; -$c-success-dark-3: color-variation($c-success, -3) !default; -$c-success-dark-4: color-variation($c-success, -4) !default; - -// Alert color -$c-alert: #ff6335 !default; - -// Old Alert color gradients, keeping them for retro compatibility -$c-alert-light: color-variation($c-alert, $c-light-step) !default; -$c-alert-dark: color-variation($c-alert, $c-dark-step) !default; - -// Alert color light gradients -$c-alert-light-1: color-variation($c-alert, 1) !default; -$c-alert-light-2: color-variation($c-alert, 2) !default; -$c-alert-light-3: color-variation($c-alert, 3) !default; -$c-alert-light-4: color-variation($c-alert, 4) !default; -$c-alert-light-5: color-variation($c-alert, 5) !default; - -// Alert color dark gradients -$c-alert-dark-1: color-variation($c-alert, -1) !default; -$c-alert-dark-2: color-variation($c-alert, -2) !default; -$c-alert-dark-3: color-variation($c-alert, -3) !default; -$c-alert-dark-4: color-variation($c-alert, -4) !default; - -// Error color -$c-error: #e93e40 !default; - -// Old Error Alert color gradients, keeping them for retro compatibility -$c-error-light: color-variation($c-error, $c-light-step) !default; -$c-error-dark: color-variation($c-error, $c-dark-step) !default; - -// Error color light gradients -$c-error-light-1: color-variation($c-error, 1) !default; -$c-error-light-2: color-variation($c-error, 2) !default; -$c-error-light-3: color-variation($c-error, 3) !default; -$c-error-light-4: color-variation($c-error, 4) !default; -$c-error-light-5: color-variation($c-error, 5) !default; - -// Error color dark gradients -$c-error-dark-1: color-variation($c-error, -1) !default; -$c-error-dark-2: color-variation($c-error, -2) !default; -$c-error-dark-3: color-variation($c-error, -3) !default; -$c-error-dark-4: color-variation($c-error, -4) !default; - -/////////////////////////////////////////////////////////////////////////////// -// Specific Colors -/////////////////////////////////////////////////////////////////////////////// - -// Absolute colors / common colors to avoid linting alerts on hardcoded values -$c-white: #ffffff !default; -$c-black: #000000 !default; - -// Text colors -$c-text-base: $c-gray-dark !default; -$c-text-accent: $c-accent !default; -$c-text-link: $c-text-accent !default; - -// Social brand colors -$c-facebook: #3b5998 !default; -$c-twitter: #55acee !default; -$c-google: #d34836 !default; -$c-youtube: #bb0000 !default; -$c-whatsapp: #7ed321 !default; -$c-instagram: #8a3ab9 !default; -$c-tiktok: #69c9d0 !default; - -// Highlight color -$c-highlight: #fffed4 !default; diff --git a/packages/sui-theme/src/settings/_font.scss b/packages/sui-theme/src/settings/_font.scss deleted file mode 100644 index a46021c14..000000000 --- a/packages/sui-theme/src/settings/_font.scss +++ /dev/null @@ -1,125 +0,0 @@ -// --- Fonts and typography --- // -// -// Prefixes used: -// * ff = font family -// * fw = font weight -// * fz = font size -// * lh = line height - -// Font family -$ff-sans-serif: 'Open Sans', Helvetica, sans-serif !default; - -// Font weights -$fw-light: 300 !default; -$fw-regular: 400 !default; -$fw-semi-bold: 500 !default; -$fw-bold: 700 !default; - -// Font sizes -$fz-base: 16px !default; // 16px - -$fz-giant: $fz-base + 20 !default; // 36px -$fz-xxxl: $fz-base + 12 !default; // 28px -$fz-xxl: $fz-base + 8 !default; // 24px -$fz-xl: $fz-base + 4 !default; // 20px -$fz-l: $fz-base + 2 !default; // 18px -$fz-m: $fz-base !default; // 16px -$fz-s: $fz-base - 2 !default; // 14px -$fz-xs: $fz-base - 4 !default; // 12px -$fz-xxs: $fz-base - 6 !default; // 10px - -// Semantic font sizes -$fz-h1: $fz-giant !default; // 36px -$fz-h2: $fz-xxxl !default; // 28px -$fz-h3: $fz-xxl !default; // 24px -$fz-h4: $fz-xl !default; // 20px -$fz-h5: $fz-l !default; // 18px -$fz-body: $fz-m !default; // 16px - -// Line heights -$lh-giant: $fz-giant * 1.2 !default; // 43.2px -$lh-xxxl: $fz-xxxl * 1.2 !default; // 33.6px -$lh-xxl: $fz-xxl * 1.2 !default; // 28.8px -$lh-xl: $fz-xl * 1.2 !default; // 24px -$lh-l: $fz-l * 1.2 !default; // 21.6px -$lh-m: $fz-m * 1.3 !default; // 20.8px -$lh-s: $fz-s * 1.3 !default; // 18.2px -$lh-xs: $fz-xs * 1.2 !default; // 14.4px -$lh-xxs: $fz-xxs * 1.2 !default; // 12px - -// Letter spacing -$ls-giant: 1.5px !default; -$ls-xxxl: 1.2px !default; -$ls-xxl: 0.38px !default; -$ls-xl: 0.37px !default; -$ls-l: 0.36px !default; -$ls-m: 0.35px !default; -$ls-s: 0.25px !default; -$ls-xs: 0.2px !default; -$ls-xxs: 0.1px !default; - -// Large Title -$fz-large-title: $fz-giant !default; -$fw-large-title: $fw-semi-bold !default; -$ls-large-title: $ls-xl !default; -$lh-large-title: $lh-giant !default; - -// Title 1 -$fz-title1: $fz-xxxl !default; -$fw-title1: $fw-semi-bold !default; -$ls-title1: $ls-l !default; -$lh-title1: $lh-xxxl !default; - -// Title 2 -$fz-title2: $fz-xxl !default; -$fw-title2: $fw-semi-bold !default; -$ls-title2: $ls-m !default; -$lh-title2: $lh-xxl !default; - -// Title 3 -$fz-title3: $fz-xl !default; -$fw-title3: $fw-semi-bold !default; -$ls-title3: $ls-xxl !default; -$lh-title3: $lh-xl !default; - -// Headline 1 -$fz-headline1: $fz-l !default; -$fw-headline1: $fw-semi-bold !default; -$ls-headline1: $ls-s !default; -$lh-headline1: $lh-l !default; - -// Headline 2 -$fz-headline2: $fz-m !default; -$fw-headline2: $fw-semi-bold !default; -$ls-headline2: $ls-s !default; -$lh-headline2: $lh-m !default; - -// Body 1 -$fz-body1: $fz-m !default; -$fw-body1: $fw-regular !default; -$ls-body1: $ls-xs !default; -$lh-body1: $lh-m !default; - -// Body 2 -$fz-body2: $fz-s !default; -$fw-body2: $fw-regular !default; -$ls-body2: $ls-xxs !default; -$lh-body2: $lh-xs !default; - -// Callout -$fz-callout: $fz-s !default; -$fw-callout: $fw-semi-bold !default; -$ls-callout: $ls-xxxl !default; -$lh-callout: $lh-xs !default; - -// Caption -$fz-caption: $fz-xs !default; -$fw-caption: $fw-regular !default; -$ls-caption: $ls-xs !default; -$lh-caption: $lh-xs !default; - -// Overline -$fz-overline: $fz-xxs !default; -$fw-overline: $fw-semi-bold !default; -$ls-overline: $ls-giant !default; -$lh-overline: $lh-xs !default; diff --git a/packages/sui-theme/src/settings/_layers.scss b/packages/sui-theme/src/settings/_layers.scss deleted file mode 100644 index 98b144e4c..000000000 --- a/packages/sui-theme/src/settings/_layers.scss +++ /dev/null @@ -1,12 +0,0 @@ -// --- Layers --- // - -// z-index -$z-spinner: 1500 !default; -$z-cmp: 1400 !default; -$z-banner: 1300 !default; -$z-notifications: 1200 !default; -$z-modal: 1100 !default; -$z-sidebar: 1000 !default; -$z-tooltips: 900 !default; -$z-navigation: 800 !default; -$z-dropdown-menu: 1 !default; diff --git a/packages/sui-theme/src/settings/_motion.scss b/packages/sui-theme/src/settings/_motion.scss deleted file mode 100644 index a635ea5a6..000000000 --- a/packages/sui-theme/src/settings/_motion.scss +++ /dev/null @@ -1,34 +0,0 @@ -// Settings for the SUI Motion Tokens - -// Duration Tokens -------------------- -// Naming & timing reference: Polaris Design System https://polaris-tokens.herokuapp.com/ -$duration-none: 0 !default; -$duration-fast: 100ms !default; -$duration-normal: 300ms !default; -$duration-slow: 500ms !default; - -// Aliases to follow the Emmet naming convention -$dur-none: $duration-none; -$dur-fast: $duration-fast; -$dur-normal: $duration-normal; -$dur-slow: $duration-slow; - -// Timing Function Tokens ------------- -// We define the default timing fuctions as a Cubic Bézier -// to have more control and a consistence naming with other -// custom timings functions. -$timing-function-linear: cubic-bezier(0, 0, 1, 1) !default; -$timing-function-ease: cubic-bezier(0.25, 0.1, 0.25, 1) !default; -$timing-function-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1) !default; -$timing-function-ease-in: cubic-bezier(0.42, 0, 1, 1) !default; -$timing-function-ease-out: cubic-bezier(0, 0, 0.58, 1) !default; - -// Aliases to follow the Emmet naming convention -$tf-linear: $timing-function-linear; -$tf-ease: $timing-function-ease; -$tf-ease-in-out: $timing-function-ease-in-out; -$tf-ease-in: $timing-function-ease-in; -$tf-ease-out: $timing-function-ease-out; - -// Transitions -$trs-default: $duration-normal !default; diff --git a/packages/sui-theme/src/settings/_opacity.scss b/packages/sui-theme/src/settings/_opacity.scss deleted file mode 100644 index 33489c9de..000000000 --- a/packages/sui-theme/src/settings/_opacity.scss +++ /dev/null @@ -1,5 +0,0 @@ -// --- Opacity --- // -// -// Alpha value for rgba - -$c-opacity: (15, 25, 50, 75, 100) !default; diff --git a/packages/sui-theme/src/settings/_size.scss b/packages/sui-theme/src/settings/_size.scss deleted file mode 100644 index 13f765112..000000000 --- a/packages/sui-theme/src/settings/_size.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use 'sass:math'; -// --- Sizes --- // -// -// Prefixes used: -// * sz = size -$sz-base: 8px !default; - -// Icons -$sz-icon: 3 * $sz-base !default; - -$sz-icon-xs: math.div(2, 4) * $sz-icon !default; // 12px -$sz-icon-s: math.div(2, 3) * $sz-icon !default; // 16px -$sz-icon-m: math.div(3, 3) * $sz-icon !default; // 24px -$sz-icon-l: math.div(4, 3) * $sz-icon !default; // 32px -$sz-icon-xl: math.div(5, 3) * $sz-icon !default; // 40px -$sz-icon-xxl: math.div(6, 3) * $sz-icon !default; // 48px diff --git a/packages/sui-theme/src/settings/_spacing.scss b/packages/sui-theme/src/settings/_spacing.scss deleted file mode 100644 index 02c201910..000000000 --- a/packages/sui-theme/src/settings/_spacing.scss +++ /dev/null @@ -1,51 +0,0 @@ -@import './size'; - -// --- Spacing --- // -// -// The naming convention used for variables is based on Emmet. -// See [Emmet cheat sheet](http://docs.emmet.io/cheat-sheet/) -// -// Primary prefixes: -// * m = margin -// * p = padding - -// Paddings -$p-base: $sz-base; // 8px - -$p-giant: $p-base * 6 !default; // 48px -$p-xxxl: $p-base * 5 !default; // 40px -$p-xxl: $p-base * 4 !default; // 32px -$p-xl: $p-base * 3 !default; // 24px -$p-l: $p-base * 2 !default; // 16px -$p-m: $p-base !default; // 8px -$p-s: $p-base * 0.5 !default; // 4px -$p-xs: $p-base * 0.25 !default; // 2px - -// Margins -$m-base: $sz-base; // 8px - -$m-giant: $m-base * 6 !default; // 48px -$m-xxxl: $m-base * 5 !default; // 40px -$m-xxl: $m-base * 4 !default; // 32px -$m-xl: $m-base * 3 !default; // 24px -$m-l: $m-base * 2 !default; // 16px -$m-m: $m-base !default; // 8px -$m-s: $m-base * 0.5 !default; // 4px -$m-xs: $m-base * 0.25 !default; // 2px - -// Gutter -$gutter: $sz-base * 2 !default; - -$gutter-s: $gutter * 0.5 !default; -$gutter-l: $gutter * 2 !default; - -// Gap -$g-base: $sz-base; - -$g-giant: $g-base * 6; // 48px -$g-xxxl: $g-base * 5; // 40px -$g-xxl: $g-base * 4; // 32px -$g-xl: $g-base * 3; // 24px -$g-l: $g-base * 2; // 16px -$g-m: $g-base; // 8px -$g-s: $g-base * 0.5; // 4px diff --git a/packages/sui-theme/src/utils.scss b/packages/sui-theme/src/utils.scss deleted file mode 100644 index caed5078e..000000000 --- a/packages/sui-theme/src/utils.scss +++ /dev/null @@ -1,12 +0,0 @@ -// Utils -@import './utils/breakpoints'; -@import './utils/colors'; -@import './utils/forms'; -@import './utils/grid'; -@import './utils/image'; -@import './utils/list'; -@import './utils/opacity'; -@import './utils/string'; -@import './utils/scrollbars'; -@import './utils/text'; -@import './utils/url'; diff --git a/packages/sui-theme/src/utils/_breakpoints.scss b/packages/sui-theme/src/utils/_breakpoints.scss deleted file mode 100644 index 997f818f0..000000000 --- a/packages/sui-theme/src/utils/_breakpoints.scss +++ /dev/null @@ -1,27 +0,0 @@ -// Breakpoint viewport sizes and media queries. -// -// Breakpoints are defined as a map of (name: minimum width), order from small to large: -// -// (xxs: 0, xs: 320px, sm: 576px, md: 768px) - -// Minimum breakpoint width. Null for the smallest (first) breakpoint. -// -// >> breakpoint-min(sm) -// 576px -@function breakpoint-min($name) { - $min: map-get($breakpoints, $name); - @return if($min != 0, $min, null); -} - -// Media of at least the minimum breakpoint width. No query for the smallest breakpoint. -// Makes the @content apply to the given breakpoint and wider. -@mixin media-breakpoint-up($name) { - $min: breakpoint-min($name); - @if $min { - @media (min-width: $min) { - @content; - } - } @else { - @content; - } -} diff --git a/packages/sui-theme/src/utils/_colors.scss b/packages/sui-theme/src/utils/_colors.scss deleted file mode 100644 index edb4ca3c2..000000000 --- a/packages/sui-theme/src/utils/_colors.scss +++ /dev/null @@ -1,38 +0,0 @@ -// --- Color --- // - -// Color Variations Function: - -// Description: -// Provide a color and step to get a lighter or darker color variation. -// If step provided is bigger than the step variation limit the lighter or darker color available will be returned. - -// Usage: -// $c-primary-light: color-variation($c-primary, 1) -> 1 step lighter -// $c-primary-lighter: color-variation($c-primary, 2) -> 2 steps lighter -// $c-primary-dark: color-variation($c-primary, -2) -> 2 steps darker -// $c-primary-darkest: color-variation($c-primary, -4) -> 4 steps darker - -$color-variation-dark: black !default; -$color-variation-light: white !default; - -$color-lighten-steps: 25, 50, 75, 90, 95 !default; -$color-darken-steps: 20, 35, 55, 75 !default; - -@function color-variation($color, $step: 0, $dark: $color-variation-dark, $light: $color-variation-light) { - $positive-steps: length($color-lighten-steps); - $negative-steps: length($color-darken-steps); - - $variation: $color; - - @if ($step > $positive-steps) { - $variation: mix($light, $color, nth($color-lighten-steps, $positive-steps)); - } @else if ($step < -$negative-steps) { - $variation: mix($dark, $color, nth($color-darken-steps, $negative-steps)); - } @else if ($step < 0) { - $variation: mix($dark, $color, nth($color-darken-steps, -$step)); - } @else if ($step > 0) { - $variation: mix($light, $color, nth($color-lighten-steps, $step)); - } - - @return $variation; -} diff --git a/packages/sui-theme/src/utils/_forms.scss b/packages/sui-theme/src/utils/_forms.scss deleted file mode 100644 index b05c44ef2..000000000 --- a/packages/sui-theme/src/utils/_forms.scss +++ /dev/null @@ -1,92 +0,0 @@ -// --- Mixins --- // - -// Placeholder -@mixin input-placeholder { - &::-webkit-input-placeholder { - @content; - } - - &:-moz-placeholder { - @content; - } - - &::-moz-placeholder { - @content; - } - - &:-ms-input-placeholder { - @content; - } -} - -// Appearance -@mixin appearance($value) { - -moz-appearance: $value; - -webkit-appearance: $value; - appearance: $value; - - &::-ms-expand { - display: none; - } -} - -//.sui-Form { -// @include form-field(input); -//} - -//
-// -//
-// -//
-//
- -@mixin form-field($field) { - &-#{$field} { - border-color: $c-gray-light; - border-style: solid; - border-width: $bdw-s; - font-size: $fz-base; - padding-left: $p-l; - padding-right: $p-l; - width: 100%; - - &:not(:disabled)::placeholder { - color: $c-gray-dark; - font-family: $ff-input-placeholder; - } - - &:disabled { - background: $c-gray-lightest; - - &::placeholder { - color: $c-gray-light; - font-family: $ff-input-placeholder; - } - } - - &:focus { - box-shadow: inset 0 0 3px 0 $c-primary; - } - } - - @include field-size(input); -} - -// Size for form elements -@mixin field-size($field) { - $size: null !default; - @if ($field == 'input') { - $size: medium 40px, small 30px; - } @else if($field == 'textarea') { - $size: medium 400px, small 200px; - } - - @each $type, $h in $size { - &--#{$type} { - #{$field} { - height: $h; - } - } - } -} diff --git a/packages/sui-theme/src/utils/_grid.scss b/packages/sui-theme/src/utils/_grid.scss deleted file mode 100644 index 87ff0e42f..000000000 --- a/packages/sui-theme/src/utils/_grid.scss +++ /dev/null @@ -1,39 +0,0 @@ -// --- Grid --- // - -// Description: -// Provide a util mixins for generate your layout. - -// Usage: - -// --- grid-parent --- // -// The $gap is negative margin of column spacing. -// @include gridg-parent(8px); // Create grid parent with 8px of gap - -// --- grid-flex-basis --- // -// The $columns is 12 columns based. -// @include grid-flex-basis(6); // Added a `6/12` columns of width. - -// --- grid-value --- // -// @include grid-value(xs, 6); // Added a `xs` breakpoint, 6 columns -// @include grid-value(sm, 12); // Added a `sm` breakpoint, 12 columns - -@use 'sass:math'; - -$grid-columns: 12; - -@mixin grid-parent($gap) { - display: flex; - flex-wrap: wrap; - list-style: none; - margin: 0 (-$gap); -} - -@mixin grid-flex-basis($columns) { - min-width: math.div(100%, $grid-columns) * $columns; -} - -@mixin grid-value($breakpoint-name, $columns) { - @include media-breakpoint-up($breakpoint-name) { - @include grid-flex-basis($columns); - } -} diff --git a/packages/sui-theme/src/utils/_image.scss b/packages/sui-theme/src/utils/_image.scss deleted file mode 100644 index ad6e0558a..000000000 --- a/packages/sui-theme/src/utils/_image.scss +++ /dev/null @@ -1,21 +0,0 @@ -// Mixin to maintain an elements aspect ratio, even as it scales. -@use 'sass:math'; - -@mixin aspect-ratio($width: 16, $height: 9) { - position: relative; - - &::before { - content: ''; - display: block; - padding-top: math.div($height, $width) * 100%; - width: 100%; - } - - > * { - bottom: 0; - left: 0; - position: absolute; - right: 0; - top: 0; - } -} diff --git a/packages/sui-theme/src/utils/_list.scss b/packages/sui-theme/src/utils/_list.scss deleted file mode 100644 index 8ffca14aa..000000000 --- a/packages/sui-theme/src/utils/_list.scss +++ /dev/null @@ -1,37 +0,0 @@ -// --- SUI List --- // -// @include sui-list; -// @include sui-list('inline'); -// @include sui-list('grow'); - -@mixin sui-list-gutter($m-list-gutter: $gutter-s) { - margin-left: $m-list-gutter; -} - -@mixin sui-list($type: 'block', $m-list-gutter: $gutter-s) { - @include reset-list; - display: flex; - - @if $type == 'block' { - flex-direction: column; - } @else { - flex-direction: row; - margin-left: -$m-list-gutter; - } - - &-item { - @if $type == 'inline' { - flex: 0 0 auto; - @include sui-list-gutter($m-list-gutter); - } - - @if $type == 'grow' { - @include sui-list-gutter($m-list-gutter); - flex: 1 1 100%; - } - - @if $type == 'grow-custom' { - @include sui-list-gutter($m-list-gutter); - @content; - } - } -} diff --git a/packages/sui-theme/src/utils/_opacity.scss b/packages/sui-theme/src/utils/_opacity.scss deleted file mode 100644 index 78ea8fbe9..000000000 --- a/packages/sui-theme/src/utils/_opacity.scss +++ /dev/null @@ -1,31 +0,0 @@ -// --- Opacity --- // - -// alpha parameter for rgba Colors -// @include bgcolor-opacity($c-black); - -@mixin bgcolor-opacity($color) { - background-color: rgba($color, 1); - - @each $value in $c-opacity { - &-#{$value} { - background-color: rgba($color, $value * 0.01); - } - } -} - -@mixin bgcolor-overlay-opacity($color) { - @each $value in $c-opacity { - &-overlay-#{$value} { - position: relative; - - &::before { - background-color: rgba($color, $value * 0.01); - content: ''; - display: block; - height: 100%; - position: absolute; - width: 100%; - } - } - } -} diff --git a/packages/sui-theme/src/utils/_scrollbars.scss b/packages/sui-theme/src/utils/_scrollbars.scss deleted file mode 100644 index 4702a7fdc..000000000 --- a/packages/sui-theme/src/utils/_scrollbars.scss +++ /dev/null @@ -1,14 +0,0 @@ -@mixin hide-scrollbar { - /* hide scrollbar on Chrome, Safari and Opera */ - &::-webkit-scrollbar { - /* to make it work on iOS devices */ - background: transparent; - display: none; - height: 0; - width: 0; - } - - /* hide scrollbar on IE, Edge and Firefox */ - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ -} diff --git a/packages/sui-theme/src/utils/_spacing.scss b/packages/sui-theme/src/utils/_spacing.scss deleted file mode 100644 index a000d4041..000000000 --- a/packages/sui-theme/src/utils/_spacing.scss +++ /dev/null @@ -1,46 +0,0 @@ -// DESCRIPTION: -// -// Provides a basic spacing classes library based in emmet convection -// -// USAGE: -// -// In your vertical theme... -// -// @import '~/@s-ui/theme/lib/classes'; -// -// GENERATE: -// -// .m-m { -// margin: 8px; -// } -// .m-s { -// margin: 4px; -// } -// -//.... -// -// .mt-m { -// margin-top: 8px; -// } -// .mt-s { -// margin-top: 4px; -// } -// -//.... - -@mixin create-space($space, $side, $sizes) { - $sd: str-slice($side, 1, 1); - $sp: str-slice($space, 1, 1); - $symbol: '-'; - - @if ($side == '') { - $sd: ''; - $symbol: ''; - } - - @each $size, $value in $sizes { - .#{$sp}#{$sd}-#{$size} { - #{$space}#{$symbol}#{$side}: $value; - } - } -} diff --git a/packages/sui-theme/src/utils/_string.scss b/packages/sui-theme/src/utils/_string.scss deleted file mode 100644 index e1d229916..000000000 --- a/packages/sui-theme/src/utils/_string.scss +++ /dev/null @@ -1,70 +0,0 @@ -// Split a string into a list -// http://stackoverflow.com/questions/32376461/how-to-split-a-string-into-two-lists-of-numbers-in-sass#answer-42295154 -@use 'sass:math'; - -@function str-split($string, $separator) { - // Empty list - $list: (); - // First index of separator in string - $index: str-index($string, $separator); - // Loop through string - @while $index != null { - // Get the substring from the first character to the separator - $item: str-slice($string, 1, $index - 1); - // Push item to list - $list: append($list, $item); - // Remove item and separator from string - $string: str-slice($string, $index + 1); - // Find new index of separator - $index: str-index($string, $separator); - } - // Add the remaining string to list (the last item) - $list: append($list, $string); - - @return $list; -} - -// Casting a string to a number -// http://hugogiraudel.com/2014/01/15/sass-string-to-number/ -@function to-number($value) { - @if type-of($value) == 'number' { - @return $value; - } @else if type-of($value) != 'string' { - $_: log('Value for `to-number` should be a number or a string.'); - } - - $result: 0; - $digits: 0; - $minus: str-slice($value, 1, 1) == '-'; - $numbers: ( - '0': 0, - '1': 1, - '2': 2, - '3': 3, - '4': 4, - '5': 5, - '6': 6, - '7': 7, - '8': 8, - '9': 9 - ); - - @for $i from if($minus, 2, 1) through str-length($value) { - $character: str-slice($value, $i, $i); - - @if not(index(map-keys($numbers), $character) or $character == '.') { - @return to-length(if($minus, -$result, $result), str-slice($value, $i)); - } - - @if $character == '.' { - $digits: 1; - } @else if $digits == 0 { - $result: $result * 10 + map-get($numbers, $character); - } @else { - $digits: $digits * 10; - $result: $result + math.div(map-get($numbers, $character), $digits); - } - } - - @return if($minus, -$result, $result); -} diff --git a/packages/sui-theme/src/utils/_text.scss b/packages/sui-theme/src/utils/_text.scss deleted file mode 100644 index 806068219..000000000 --- a/packages/sui-theme/src/utils/_text.scss +++ /dev/null @@ -1,91 +0,0 @@ -@mixin calc-font-size($font-size, $font-weight, $letter-spacing, $line-height) { - font-size: $font-size; - font-family: $ff-sans-serif; - font-weight: $font-weight; - letter-spacing: $letter-spacing; - line-height: $line-height; -} - -@mixin font-size($type) { - @if $type == 'large-title' { - @include font-size-title1; - - @include media-breakpoint-up(s) { - @include font-size-large; - } - } - @if $type == 'title1' { - @include font-size-title2; - - @include media-breakpoint-up(s) { - @include font-size-title1; - } - } - @if $type == 'title2' { - @include font-size-title3; - - @include media-breakpoint-up(s) { - @include font-size-title2; - } - } - @if $type == 'headline1' { - @include font-size-headline2; - - @include media-breakpoint-up(s) { - @include font-size-headline1; - } - } - @if $type == 'headline2' { - @include font-size-headline2; - } - @if $type == 'body1' { - @include calc-font-size($fz-body1, $fw-body1, $ls-body1, $lh-body1); - } - @if $type == 'body2' { - @include calc-font-size($fz-body2, $fw-body2, $ls-body2, $lh-body2); - } - @if $type == 'callout' { - @include calc-font-size($fz-callout, $fw-callout, $ls-callout, $lh-callout); - } - @if $type == 'caption' { - @include calc-font-size($fz-caption, $fw-caption, $ls-caption, $lh-caption); - } - @if $type == 'overline' { - @include calc-font-size($fz-overline, $fw-overline, $ls-overline, $lh-overline); - } -} - -@mixin font-size-large { - @include calc-font-size($fz-large-title, $fw-large-title, $ls-large-title, $lh-large-title); -} -@mixin font-size-title1 { - @include calc-font-size($fz-title1, $fw-title1, $ls-title1, $lh-title1); -} -@mixin font-size-title2 { - @include calc-font-size($fz-title2, $fw-title2, $ls-title2, $lh-title2); -} -@mixin font-size-title3 { - @include calc-font-size($fz-title3, $fw-title3, $ls-title3, $lh-title3); -} -@mixin font-size-headline1 { - @include calc-font-size($fz-headline1, $fw-headline1, $ls-headline1, $lh-headline1); -} -@mixin font-size-headline2 { - @include calc-font-size($fz-headline2, $fw-headline2, $ls-headline2, $lh-headline2); -} - -// CSS image replacement -@mixin text-hide { - background-color: transparent; - border: 0; - color: transparent; - font: 0 / 0 serif; - text-shadow: none; -} -// Truncate -@mixin truncate($max-width: 100%, $text-overflow: ellipsis) { - max-width: $max-width; - overflow: hidden; - text-overflow: $text-overflow; - white-space: nowrap; -} diff --git a/packages/sui-theme/src/utils/_url.scss b/packages/sui-theme/src/utils/_url.scss deleted file mode 100644 index a10a77a99..000000000 --- a/packages/sui-theme/src/utils/_url.scss +++ /dev/null @@ -1,7 +0,0 @@ -// --- Functions --- // - -// Image URL -@function image-url($image, $url: $url-statics + 'images') { - $url-slash: if(str-index($image, '/'), '', '/'); - @return url('#{$url}#{$url-slash}#{$image}'); -}