Skip to content

Commit

Permalink
Feat: [OR-166] Switch rebrand
Browse files Browse the repository at this point in the history
  • Loading branch information
@vicky-comeau
vicky-comeau committed Oct 12, 2023
1 parent 545c7d4 commit c1a9fd4
Showing 1 changed file with 123 additions and 56 deletions.
179 changes: 123 additions & 56 deletions packages/components/src/switch/src/Switch.css
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,50 @@
.o-ui-switch {
--o-ui-switch-hover-background: var(--hop-neutral-surface-hover);
--o-ui-switch-hover-border: var(--hop-neutral-border-hover);
--o-ui-switch-hover-icon: var(--hop-neutral-icon-hover);
--o-ui-switch-focus-background: var(--hop-neutral-surface-hover);
--o-ui-switch-focus-border: var(--hop-neutral-border-hover);
--o-ui-switch-focus-icon: var(--hop-neutral-icon-hover);
display: inline-flex;
align-items: center;
cursor: pointer;
line-height: var(--o-ui-lh-1);
max-width: 100%;
width: max-content;
height: max-content;
color: var(--o-ui-text-alias-primary);
color: var(--hop-neutral-text);
}

.o-ui-switch, .o-ui-switch::before, .o-ui-switch::after {
box-sizing: border-box;
}

/* SWITCH */
.o-ui-switch .o-ui-switch-control {
.o-ui-switch-control {
display: inline-block;
background-color: var(--o-ui-bg-alias-hard-break);
border-radius: var(--o-ui-br-pill);
background-color: var(--hop-neutral-surface);
border: 0.06rem solid var(--hop-neutral-border);
border-radius: var(--hop-shape-pill);
box-shadow: 0 0 0 0.12rem transparent, 0 0 0 0.219rem transparent;
position: relative;
flex-shrink: 0;
transition: all var(--o-ui-easing-duration-2) var(--o-ui-easing-focus);
}

.o-ui-switch .o-ui-switch-control::before {
.o-ui-switch-control::before {
--o-ui-switch-control-before-transform-translate-value: var(--hop-space-inline-xs);
content: "";
display: inline-block;
background-color: var(--o-ui-bg-alias-static-white);
border-radius: var(--o-ui-br-circular);
background-color: var(--hop-neutral-icon);
border-radius: var(--hop-shape-circle);
position: absolute;
transform: translate(2px, 2px);
transform: translate(var(--o-ui-switch-control-before-transform-translate-value), var(--o-ui-switch-control-before-transform-translate-value));
transition: all var(--o-ui-easing-duration-2) var(--o-ui-easing-focus);
}

/* LABEL */
.o-ui-switch .o-ui-switch-label {
.o-ui-switch-label {
grid-area: label;
margin-left: var(--o-ui-sp-2);
margin-left: var(--hop-space-stack-sm);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
Expand All @@ -42,103 +54,158 @@
/* LABEL | REVERSE */
.o-ui-switch-reverse .o-ui-switch-label {
margin-left: 0;
margin-right: var(--o-ui-sp-2);
margin-right: var(--hop-space-stack-sm);
}

/* ICON */
.o-ui-switch .o-ui-switch-icon {
margin-left: var(--o-ui-sp-1);
.o-ui-switch-icon {
margin-left: var(--hop-space-stack-xs);
}

/* ICON | REVERSE */
.o-ui-switch-reverse .o-ui-switch-icon {
margin-left: 0;
margin-right: var(--o-ui-sp-1);
margin-right: var(--hop-space-stack-xs);
}

/* REVERSE */
.o-ui-switch-reverse {
flex-direction: row-reverse;
}

/* INVALID */
.o-ui-switch-invalid {
color: var(--o-ui-text-alias-alert);
/* STATE */
/* STATE | HOVER */
.o-ui-switch:not(.o-ui-switch-disabled):hover .o-ui-switch-control,
.o-ui-switch-hover:not(.o-ui-switch-disabled) .o-ui-switch-control {
background-color: var(--o-ui-switch-hover-background);
border-color: var(--o-ui-switch-hover-border);
}

.o-ui-switch-invalid .o-ui-switch-control {
background-color: var(--o-ui-bg-alias-alert-light);
.o-ui-switch:not(.o-ui-switch-disabled):hover .o-ui-switch-control::before,
.o-ui-switch-hover:not(.o-ui-switch-disabled) .o-ui-switch-control::before {
background-color: var(--o-ui-switch-hover-icon);
}

.o-ui-switch-checked.o-ui-switch-invalid .o-ui-switch-control {
background-color: var(--o-ui-bg-alias-alert);
/* STATE | FOCUS */
.o-ui-switch input[type="checkbox"]:focus-visible + .o-ui-switch-control,
.o-ui-switch-focus:not(.o-ui-switch-disabled) .o-ui-switch-control {
background-color: var(--o-ui-switch-focus-background);
border-color: var(--o-ui-switch-focus-border);
box-shadow: 0 0 0 0.12rem var(--hop-neutral-surface), 0 0 0 0.219rem var(--hop-primary-border-focus);
}

/* STATE */
/* STATE | CHECKED */
.o-ui-switch-checked .o-ui-switch-control {
background-color: var(--o-ui-bg-alias-accent);
.o-ui-switch input[type="checkbox"]:focus-visible + .o-ui-switch-control::before,
.o-ui-switch-focus:not(.o-ui-switch-disabled) .o-ui-switch-control::before {
background-color: var(--o-ui-switch-focus-icon);
}

.o-ui-switch-checked .o-ui-switch-control::before {
transform: translate(calc(var(--o-ui-sz-6) / 2 + 2px), 2px);
/* STATE | CHECKED */
.o-ui-switch-checked .o-ui-switch-control,
.o-ui-switch-checked:not(.o-ui-switch-disabled):hover .o-ui-switch-control,
.o-ui-switch-checked.o-ui-switch-hover:not(.o-ui-switch-disabled) .o-ui-switch-control,
.o-ui-switch-checked input[type="checkbox"]:focus-visible + .o-ui-switch-control,
.o-ui-switch-checked.o-ui-switch-focus:not(.o-ui-switch-disabled) .o-ui-switch-control {
background-color: var(--hop-neutral-surface-active);
border-color: var(--hop-neutral-border-active);
}

/* STATE | FOCUS */
.o-ui-switch-control:after {
opacity: 0;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
position: absolute;
box-shadow: 0 0 0 var(--o-ui-focus-ring-thickness-md) var(--o-ui-focus-ring-color-alias-default);
border-radius: var(--o-ui-br-pill);
transition: var(--o-ui-focus-ring-transition);
.o-ui-switch-checked .o-ui-switch-control::before {
transform: translate(calc(3rem / 2 + var(--o-ui-switch-control-before-transform-translate-value)), var(--o-ui-switch-control-before-transform-translate-value));
}

.o-ui-switch input[type="checkbox"]:focus-visible + .o-ui-switch-control:after,
.o-ui-switch-focus:not(.o-ui-switch-disabled) .o-ui-switch-control:after {
opacity: 1;
.o-ui-switch-checked .o-ui-switch-control::before,
.o-ui-switch-checked:not(.o-ui-switch-disabled):hover .o-ui-switch-control::before,
.o-ui-switch-checked.o-ui-switch-hover:not(.o-ui-switch-disabled) .o-ui-switch-control::before,
.o-ui-switch-checked input[type="checkbox"]:focus-visible + .o-ui-switch-control::before,
.o-ui-switch-checked.o-ui-switch-focus:not(.o-ui-switch-disabled) .o-ui-switch-control::before {
background-color: var(--hop-neutral-icon-active);
}

/* STATE | DISABLED */
.o-ui-switch[disabled],
.o-ui-switch-disabled {
opacity: var(--o-ui-disabled-opacity);
cursor: not-allowed;
}

.o-ui-switch-disabled .o-ui-switch-control {
background-color: var(--hop-neutral-surface-disabled);
border-color: var(--hop-neutral-border-disabled);
}

.o-ui-switch-disabled .o-ui-switch-control::before {
background-color: var(--hop-neutral-icon-disabled);
}

/* INVALID */
.o-ui-switch-invalid {
color: var(--hop-danger-text);
}

.o-ui-switch-invalid .o-ui-switch-control {
background-color: var(--hop-danger-surface);
border-color: var(--hop-danger-border-strong);
}

.o-ui-switch-invalid .o-ui-switch-control::before {
background-color: var(--hop-danger-icon-weak);
}

.o-ui-switch-invalid:not(.o-ui-switch-disabled):hover .o-ui-switch-control,
.o-ui-switch-invalid input[type="checkbox"]:focus-visible + .o-ui-switch-control,
.o-ui-switch-invalid.o-ui-switch-focus:not(.o-ui-switch-disabled) .o-ui-switch-control {
background-color: var(--hop-danger-surface-active);
border-color: var(--hop-danger-border-strong);
}

.o-ui-switch-invalid:not(.o-ui-switch-disabled):hover .o-ui-switch-control::before,
.o-ui-switch-invalid input[type="checkbox"]:focus-visible + .o-ui-switch-control::before,
.o-ui-switch-invalid.o-ui-switch-focus:not(.o-ui-switch-disabled) .o-ui-switch-control::before {
background-color: var(--hop-danger-icon-hover);
}

.o-ui-switch-checked.o-ui-switch-invalid .o-ui-switch-control,
.o-ui-switch-checked.o-ui-switch-invalid:not(.o-ui-switch-disabled):hover .o-ui-switch-control::before,
.o-ui-switch-checked.o-ui-switch-invalid input[type="checkbox"]:focus-visible + .o-ui-switch-control,
.o-ui-switch-checked.o-ui-switch-invalid.o-ui-switch-focus:not(.o-ui-switch-disabled) .o-ui-switch-control {
background-color: var(--hop-danger-surface-strong);
}

.o-ui-switch-checked.o-ui-switch-invalid .o-ui-switch-control::before,
.o-ui-switch-checked.o-ui-switch-invalid:not(.o-ui-switch-disabled):hover .o-ui-switch-control::before,
.o-ui-switch-checked.o-ui-switch-invalid input[type="checkbox"]:focus-visible + .o-ui-switch-control::before,
.o-ui-switch-checked.o-ui-switch-invalid.o-ui-switch-focus:not(.o-ui-switch-disabled) .o-ui-switch-control::before {
background-color: var(--hop-danger-icon-strong);
}

/* SIZING */
/* SMALL */
.o-ui-switch-sm .o-ui-switch-control {
width: var(--o-ui-sz-5);
height: var(--o-ui-sz-2);
width: 2rem;
height: 1rem;
}

.o-ui-switch-sm .o-ui-switch-control::before {
width: var(--o-ui-sz-1);
height: var(--o-ui-sz-1);
--o-ui-switch-control-before-transform-translate-value: calc(var(--hop-space-inline-xs) / 2);
width: 0.75rem;
height: 0.75rem;
transform: translate(var(--o-ui-switch-control-before-transform-translate-value), var(--o-ui-switch-control-before-transform-translate-value));
}

.o-ui-switch-sm.o-ui-switch-checked .o-ui-switch-control::before {
transform: translate(calc(var(--o-ui-sz-5) / 2 + 2px), 2px);
transform: translate(calc(2rem - 0.75rem - var(--o-ui-switch-control-before-transform-translate-value)), var(--o-ui-switch-control-before-transform-translate-value));
}

/* MEDIUM */
.o-ui-switch-md .o-ui-switch-control {
width: var(--o-ui-sz-6);
height: var(--o-ui-sz-3);
width: 3rem;
height: 1.5rem;
}

.o-ui-switch-md .o-ui-switch-control::before {
left: 0;
width: var(--o-ui-sz-2);
height: var(--o-ui-sz-2);
width: 1rem;
height: 1rem;
}

.o-ui-switch-md.o-ui-switch-checked .o-ui-switch-control::before {
transform: translate(calc(var(--o-ui-sz-6) / 2 + 2px), 2px);
transform: translate(calc(3rem - 1rem - var(--o-ui-switch-control-before-transform-translate-value)), var(--o-ui-switch-control-before-transform-translate-value));
}

0 comments on commit c1a9fd4

Please sign in to comment.