From b5fec45ccd1b0b71399023409ff12b3bdcee5b41 Mon Sep 17 00:00:00 2001
From: andresin87 <andresin87@gmail.com>
Date: Thu, 31 Oct 2024 09:38:10 +0100
Subject: [PATCH] refactor(Root): move package to sui-components

---
 package-lock.json                             |   6 +-
 packages/sui-theme/.npmignore                 |   7 -
 packages/sui-theme/CHANGELOG.md               | 289 --------------
 packages/sui-theme/README.md                  |  81 ----
 packages/sui-theme/package.json               |  12 -
 packages/sui-theme/src/_default.scss          |   3 -
 packages/sui-theme/src/_reset.scss            |  38 --
 packages/sui-theme/src/_settings.scss         |  31 --
 packages/sui-theme/src/_typography.scss       |  75 ----
 packages/sui-theme/src/classes.scss           |   2 -
 packages/sui-theme/src/classes/README.md      |  32 --
 packages/sui-theme/src/classes/_margins.scss  |  18 -
 packages/sui-theme/src/classes/_paddings.scss |  18 -
 packages/sui-theme/src/classes/index.scss     |   2 -
 packages/sui-theme/src/components/_badge.scss |  39 --
 .../sui-theme/src/components/_button.scss     | 225 -----------
 packages/sui-theme/src/components/_card.scss  |  72 ----
 packages/sui-theme/src/components/_icon.scss  |  21 -
 packages/sui-theme/src/components/_input.scss |  47 ---
 .../sui-theme/src/components/_select.scss     |  60 ---
 packages/sui-theme/src/components/_tabs.scss  |  31 --
 packages/sui-theme/src/components/_tag.scss   |  41 --
 .../components/atom/input/_placeholders.scss  |  47 ---
 .../src/components/atom/input/_settings.scss  |  35 --
 .../src/components/atom/input/index.scss      |   2 -
 .../src/components/thumbnail/_basic.scss      |   2 -
 packages/sui-theme/src/icons/_arrow.scss      |  31 --
 packages/sui-theme/src/index.scss             |  31 --
 .../sui-theme/src/layout/_breakpoints.scss    |  11 -
 packages/sui-theme/src/layout/_grid.scss      |  76 ----
 .../src/settings-compat-v7/_animation.scss    |   7 -
 .../src/settings-compat-v7/_box-style.scss    |   9 -
 .../src/settings-compat-v7/_color.scss        |  11 -
 .../src/settings-compat-v7/_components.scss   | 373 ------------------
 .../src/settings-compat-v7/_font.scss         |  40 --
 .../src/settings-compat-v7/_index.scss        |  39 --
 .../src/settings-compat-v7/_layout.scss       |  72 ----
 .../src/settings-compat-v7/_spacing.scss      |  34 --
 .../sui-theme/src/settings/_box-style.scss    |  34 --
 packages/sui-theme/src/settings/_color.scss   | 175 --------
 packages/sui-theme/src/settings/_font.scss    | 125 ------
 packages/sui-theme/src/settings/_layers.scss  |  12 -
 packages/sui-theme/src/settings/_motion.scss  |  34 --
 packages/sui-theme/src/settings/_opacity.scss |   5 -
 packages/sui-theme/src/settings/_size.scss    |  16 -
 packages/sui-theme/src/settings/_spacing.scss |  51 ---
 packages/sui-theme/src/utils.scss             |  12 -
 .../sui-theme/src/utils/_breakpoints.scss     |  27 --
 packages/sui-theme/src/utils/_colors.scss     |  38 --
 packages/sui-theme/src/utils/_forms.scss      |  92 -----
 packages/sui-theme/src/utils/_grid.scss       |  39 --
 packages/sui-theme/src/utils/_image.scss      |  21 -
 packages/sui-theme/src/utils/_list.scss       |  37 --
 packages/sui-theme/src/utils/_opacity.scss    |  31 --
 packages/sui-theme/src/utils/_scrollbars.scss |  14 -
 packages/sui-theme/src/utils/_spacing.scss    |  46 ---
 packages/sui-theme/src/utils/_string.scss     |  70 ----
 packages/sui-theme/src/utils/_text.scss       |  91 -----
 packages/sui-theme/src/utils/_url.scss        |   7 -
 59 files changed, 3 insertions(+), 2944 deletions(-)
 delete mode 100644 packages/sui-theme/.npmignore
 delete mode 100644 packages/sui-theme/CHANGELOG.md
 delete mode 100644 packages/sui-theme/README.md
 delete mode 100644 packages/sui-theme/package.json
 delete mode 100644 packages/sui-theme/src/_default.scss
 delete mode 100644 packages/sui-theme/src/_reset.scss
 delete mode 100644 packages/sui-theme/src/_settings.scss
 delete mode 100644 packages/sui-theme/src/_typography.scss
 delete mode 100644 packages/sui-theme/src/classes.scss
 delete mode 100644 packages/sui-theme/src/classes/README.md
 delete mode 100644 packages/sui-theme/src/classes/_margins.scss
 delete mode 100644 packages/sui-theme/src/classes/_paddings.scss
 delete mode 100644 packages/sui-theme/src/classes/index.scss
 delete mode 100644 packages/sui-theme/src/components/_badge.scss
 delete mode 100644 packages/sui-theme/src/components/_button.scss
 delete mode 100644 packages/sui-theme/src/components/_card.scss
 delete mode 100644 packages/sui-theme/src/components/_icon.scss
 delete mode 100644 packages/sui-theme/src/components/_input.scss
 delete mode 100644 packages/sui-theme/src/components/_select.scss
 delete mode 100644 packages/sui-theme/src/components/_tabs.scss
 delete mode 100644 packages/sui-theme/src/components/_tag.scss
 delete mode 100644 packages/sui-theme/src/components/atom/input/_placeholders.scss
 delete mode 100644 packages/sui-theme/src/components/atom/input/_settings.scss
 delete mode 100644 packages/sui-theme/src/components/atom/input/index.scss
 delete mode 100644 packages/sui-theme/src/components/thumbnail/_basic.scss
 delete mode 100644 packages/sui-theme/src/icons/_arrow.scss
 delete mode 100644 packages/sui-theme/src/index.scss
 delete mode 100644 packages/sui-theme/src/layout/_breakpoints.scss
 delete mode 100644 packages/sui-theme/src/layout/_grid.scss
 delete mode 100644 packages/sui-theme/src/settings-compat-v7/_animation.scss
 delete mode 100644 packages/sui-theme/src/settings-compat-v7/_box-style.scss
 delete mode 100644 packages/sui-theme/src/settings-compat-v7/_color.scss
 delete mode 100644 packages/sui-theme/src/settings-compat-v7/_components.scss
 delete mode 100644 packages/sui-theme/src/settings-compat-v7/_font.scss
 delete mode 100644 packages/sui-theme/src/settings-compat-v7/_index.scss
 delete mode 100644 packages/sui-theme/src/settings-compat-v7/_layout.scss
 delete mode 100644 packages/sui-theme/src/settings-compat-v7/_spacing.scss
 delete mode 100644 packages/sui-theme/src/settings/_box-style.scss
 delete mode 100644 packages/sui-theme/src/settings/_color.scss
 delete mode 100644 packages/sui-theme/src/settings/_font.scss
 delete mode 100644 packages/sui-theme/src/settings/_layers.scss
 delete mode 100644 packages/sui-theme/src/settings/_motion.scss
 delete mode 100644 packages/sui-theme/src/settings/_opacity.scss
 delete mode 100644 packages/sui-theme/src/settings/_size.scss
 delete mode 100644 packages/sui-theme/src/settings/_spacing.scss
 delete mode 100644 packages/sui-theme/src/utils.scss
 delete mode 100644 packages/sui-theme/src/utils/_breakpoints.scss
 delete mode 100644 packages/sui-theme/src/utils/_colors.scss
 delete mode 100644 packages/sui-theme/src/utils/_forms.scss
 delete mode 100644 packages/sui-theme/src/utils/_grid.scss
 delete mode 100644 packages/sui-theme/src/utils/_image.scss
 delete mode 100644 packages/sui-theme/src/utils/_list.scss
 delete mode 100644 packages/sui-theme/src/utils/_opacity.scss
 delete mode 100644 packages/sui-theme/src/utils/_scrollbars.scss
 delete mode 100644 packages/sui-theme/src/utils/_spacing.scss
 delete mode 100644 packages/sui-theme/src/utils/_string.scss
 delete mode 100644 packages/sui-theme/src/utils/_text.scss
 delete mode 100644 packages/sui-theme/src/utils/_url.scss

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:
-// <div class="sui-selectWrap">
-//   <select class="sui-select">
-//     [...]
-//   </select>
-//   <div class="sui-selectIcon">
-//   </div>
-// </div>
-//
-// @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);
-//}
-
-//<div class="sui-AtomInput sui-AtomInput--success">
-//  <label for="text">Simple text input</label>
-//  <div class="sui-AtomInput-inputWrapper sui-AtomInput--medium">
-//    <input class="sui-AtomInput-input" label="Simple text input" placeholder="Input + placeholder" type="text">
-//  </div>
-//</div>
-
-@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}');
-}