@simplybusiness/theme-core 7.3.2 → 7.4.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 7.4.0
+
+### Minor Changes
+
+- 80c483e: Add Switch atom
+
+### Patch Changes
+
+- Updated dependencies [80c483e]
+  - @simplybusiness/mobius@5.20.0
+
+## 7.3.3
+
+### Patch Changes
+
+- Updated dependencies [f0b6a77]
+  - @simplybusiness/mobius@5.19.1
+
 ## 7.3.2
 
 ### Patch Changes

package/dist/index.css

@@ -366,8 +366,7 @@ h6.mobius-accordion__link-text,
 .mobius-button:where(.--variant-link){
     --button-content-color:var(--color-secondary);
     appearance:none;
-    border:none;
-    padding:0;
+    padding:var(--size-xxs);
     background-color:transparent;
     font-weight:normal;
   }
@@ -384,7 +383,6 @@ h6.mobius-accordion__link-text,
 
 .mobius-button:where(.--variant-link):focus-visible{
       box-shadow:0 0 0 var(--size-focus-ring) var(--color-focus);
-      padding:3px 0;
     }
 
 .mobius-button.--is-disabled:where(.--variant-link){
@@ -2008,6 +2006,65 @@ a.mobius-button:focus-visible,
     gap:var(--size-xl);
   }
 
+:root,
+:host{
+  --transition-duration:0.15s;
+}
+
+.mobius-switch{
+  position:relative;
+  display:inline-block;
+  border-radius:30px;
+  width:55px;
+  height:30px;
+}
+
+.mobius-switch input{
+    opacity:0;
+    width:0;
+    height:0;
+  }
+
+:is(.mobius-switch input):focus-visible  + .mobius-switch__slider{
+        box-shadow:var(--box-shadow-default);
+      }
+
+.mobius-switch__slider{
+  position:absolute;
+  cursor:pointer;
+  border-radius:30px;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+  background-color:var(--color-border);
+  transition:var(--transition-duration);
+}
+
+.mobius-switch__slider:before{
+    position:absolute;
+    content:"";
+    border-radius:50%;
+    height:26px;
+    width:26px;
+    left:3px;
+    bottom:2px;
+    background-color:var(--color-background);
+    transition:var(--transition-duration);
+  }
+
+.mobius-switch--checked .mobius-switch__slider{
+    background-color:var(--color-primary);
+  }
+
+:is(.mobius-switch--checked .mobius-switch__slider):hover{
+      background-color:var(--color-primary-hover);
+    }
+
+.mobius-switch--checked .mobius-switch__slider:before{
+    transform:translateX(23px);
+  }
+
 :root,
 :host{
   --table-border-width:1px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplybusiness/theme-core",
-  "version": "7.3.2",
+  "version": "7.4.0",
   "main": "dist/index.css",
   "simplyBusiness": {
     "publishToPublicNpm": true
@@ -26,7 +26,7 @@
     "./fonts": "./dist/fonts.css"
   },
   "dependencies": {
-    "@simplybusiness/mobius": "^5.19.0"
+    "@simplybusiness/mobius": "^5.20.0"
   },
   "devDependencies": {
     "css-loader": "^7.1.2",

package/src/index.css

@@ -28,6 +28,7 @@
 @import "@simplybusiness/mobius/src/components/Select/Select.css";
 @import "@simplybusiness/mobius/src/components/Slider/Slider.css";
 @import "@simplybusiness/mobius/src/components/Stack/Stack.css";
+@import "@simplybusiness/mobius/src/components/Switch/Switch.css";
 @import "@simplybusiness/mobius/src/components/Table/Table.css";
 @import "@simplybusiness/mobius/src/components/Text/Text.css";
 @import "@simplybusiness/mobius/src/components/TextArea/TextArea.css";