@trilogy-ds/styles 0.0.1-beta.8 → 0.0.3-beta-v4

package/framework/src/elements/_sticker.scss

@@ -1,8 +1,7 @@
 $sticker-height: 35px;
-$sticker-radius: $radius-large;
 
 .sticker {
-  border-radius: 24px;
+  border-radius: 9999px;
   font-size: 16px;
   flex-grow: 0;
   display: inline-flex;
@@ -16,58 +15,44 @@ $sticker-radius: $radius-large;
   &:not(.is-hat) {
     width: fit-content;
 
-    @include mobile{
-      border-radius: 16px;
+    @include mobile {
       font-size: 12px;
       padding: $spacing-1 $spacing-2;
       height: auto;
       line-height: 15px;
 
-      &.is-flag {
-        border-radius: 0 $sticker-radius 0 0;
-      }
-
     }
   }
 
-
-  &.is-primary {
-    background-color: getColor('main');
+  &.is-accent {
+    background-color: getColor('accent');
     color: getColor('background') !important;
   }
 
-  &.is-flag {
-    border-radius: 0 16px 0 0;
+  &.is-info {
+    background-color: getColor('info');
+    color: getColor('background') !important;
   }
 
-  &.is-outlined,
   &.is-inverted {
     background-color: white !important;
     border-style: solid;
     border-width: 2px;
     border-color: currentColor;
-    color: getColor('font') !important;
-
-    &.is-primary {
-      color: getColor('main') !important;
-    }
+    color: currentColor;
   }
 
   &.is-small {
-    border-radius: 16px;
     font-size: 12px;
     padding: $spacing-1 $spacing-2;
     height: auto;
     line-height: 15px;
 
-    &.is-flag {
-      border-radius: 0 $sticker-radius 0 0;
-    }
   }
 
   // deprecated
   &.is-stretched {
-    border-radius: $radius 0;
+    border-radius: var(--radius) 0;
     padding: 0 10px;
     position: relative;
     margin-right: 10px;
@@ -87,12 +72,12 @@ $sticker-radius: $radius-large;
     }
 
     &::before {
-      border-radius: $radius 0 0 $radius;
+      border-radius: var(--radius) 0 0 var(--radius);
       left: -6px;
     }
 
     &::after {
-      border-radius: 0 $radius $radius 0;
+      border-radius: 0 var(--radius) var(--radius) 0;
       right: -7px;
     }
   }
@@ -111,7 +96,7 @@ $sticker-radius: $radius-large;
 .has-hat-mobile {
   .is-hat {
     display: inline-block;
-    border-radius: $radius $radius 0 0;
+    border-radius: var(--radius) var(--radius) 0 0;
     position: absolute;
     top: -$sticker-height;
     left: 0;

package/framework/src/elements/_switch.scss

@@ -1,108 +1,110 @@
 .switch {
-    position: relative;
-    margin: 8px;
-
-    input {
-        display: none;
-
-        &:disabled ~ label,
-        &:disabled:checked ~ label {
-          &:hover {
-            cursor: no-drop;
-          }
-
-          &:before {
-            background-color: getColor('grey-disabled');
-          }
-        }
-
-        &:disabled ~ label {
-          &:after {
-            $colorSvg: encodecolor(getColorValue('grey-dark'));
-            content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
-          }
-        }
-
-        &:disabled:checked ~ label {
-            &:after {
-              $colorSvg: encodecolor(getColorValue('grey-dark'));
-              content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" fill="none"><path d="M11.3 22.4L18.1 29.3L32.7 14.7"/></svg>');
-            }
-        }
+  position: relative;
+  margin: 8px;
+  width: fit-content;
+
+  &.is-fullwidth {
+    width: 100%;
+  }
+
+  input {
+    display: none;
+
+    &:disabled ~ label,
+    &:disabled:checked ~ label {
+      cursor: not-allowed;
+
+      &:before {
+        background-color: getColor('disabled');
+      }
     }
 
-    label {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        padding: $spacing-1;
-        padding-right: 60px;
-
-        &:before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            right: 0;
-            border-radius: 24px;
-            width: 44px;
-            height: 22px;
-            background-color: getColorValue('grey');
-            margin-left: 16px;
-        }
-
-        &:after {
-            $colorSvg: encodecolor(getColorValue('grey'));
-            content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            right: calc(44px - 18px - 2px);
-            border-radius: 50%;
-            width: 18px;
-            height: 18px;
-            background-color: getColorValue('background');
-            transition: 0.3s;
-        }
+    &:disabled ~ label {
+      &:after {
+        $colorSvg: encodecolor(getColorValue('disabled'));
+        content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
+      }
+    }
+
+    &:disabled:checked ~ label {
+      &:after {
+        $colorSvg: encodecolor(getColorValue('disabled'));
+        content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" fill="none"><path d="M11.3 22.4L18.1 29.3L32.7 14.7"/></svg>');
+      }
+    }
+  }
+
+  label {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: $spacing-1;
+    padding-right: 60px;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 0;
+      border-radius: 9999px;
+      width: 44px;
+      height: 22px;
+      background-color: getColor('neutral');
     }
 
-    input:checked {
-        & ~ label {
-            font-weight: bold;
-
-            &:before {
-                background-color: getColorValue('alternate');
-            }
-
-            &:after {
-                right: 2px;
-                $colorSvg: encodecolor(getColorValue('alternate'));
-                content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" fill="none"><path d="M11.3 22.4L18.1 29.3L32.7 14.7"/></svg>');
-                background-color: getColorValue('background');
-            }
-        }
+    &:after {
+      $colorSvg: encodecolor(getColorValue('neutral'));
+      content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: calc(44px - 18px - 2px);
+      border-radius: 9999px;
+      width: 18px;
+      height: 18px;
+      background-color: getColorValue('background');
+      transition: 0.3s;
+    }
+  }
+
+  input:checked {
+    & ~ label {
+      font-weight: bold;
+
+      &:before {
+        background-color: getColorValue('main');
+      }
+
+      &:after {
+        right: 2px;
+        $colorSvg: encodecolor(getColorValue('main'));
+        content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" fill="none"><path d="M11.3 22.4L18.1 29.3L32.7 14.7"/></svg>');
+        background-color: getColorValue('background');
+      }
+    }
+  }
+
+  &.is-reversed {
+    label {
+      flex-direction: row-reverse;
+      padding-right: 0;
+      padding-left: 60px;
+
+      &:before {
+        left: 0;
+        margin-left: 0;
+        margin-right: 16px;
+      }
+
+      &:after {
+        left: 2px;
+      }
     }
 
-    &.is-reversed {
-        label {
-            flex-direction: row-reverse;
-            padding-right: 0;
-            padding-left: 60px;
-
-            &:before {
-                left: 0;
-                margin-left: 0;
-                margin-right: 16px;
-            }
-
-            &:after {
-                left: 2px;
-            }
-        }
-
-        input:checked ~ label:after {
-            left: calc(44px - 18px - 2px);
-        }
+    input:checked ~ label:after {
+      left: calc(44px - 18px - 2px);
     }
+  }
 }