@gitlab/duo-ui 0.1.0

package/src/scss/utility-mixins/border.scss

@@ -0,0 +1,498 @@
+/**
+* Border style utilities.
+*
+* naming convention: gl-border-{position}-{style}
+*/
+
+@mixin gl-border {
+  border: solid $gl-border-size-1 $border-color;
+}
+
+@mixin gl-border-t {
+  border-top: solid $gl-border-size-1 $border-color;
+}
+
+@mixin gl-border-b {
+  border-bottom: solid $gl-border-size-1 $border-color;
+}
+
+@mixin gl-border-l {
+  border-left: solid $gl-border-size-1 $border-color;
+}
+
+@mixin gl-border-r {
+  border-right: solid $gl-border-size-1 $border-color;
+}
+
+@mixin gl-border-none {
+  border-style: none;
+}
+
+@mixin gl-border-t-none {
+  border-top-style: none;
+}
+
+@mixin gl-border-solid {
+  border-style: solid;
+}
+
+@mixin gl-border-dashed($hover: true) {
+  border-style: dashed;
+}
+
+@mixin gl-border-dotted($hover: true) {
+  border-style: dotted;
+}
+
+@mixin gl-border-t-solid($hover: true) {
+  border-top-style: solid;
+}
+
+@mixin gl-border-t-double {
+  border-top-style: double;
+}
+
+@mixin gl-border-r-solid {
+  border-right-style: solid;
+}
+
+@mixin gl-border-b-solid($hover: true) {
+  border-bottom-style: solid;
+}
+
+@mixin gl-border-b-initial {
+  border-bottom-style: initial;
+}
+
+@mixin gl-border-l-solid {
+  border-left-style: solid;
+}
+
+@mixin gl-border-l-none {
+  border-left-style: none;
+}
+
+@mixin gl-border-r-none {
+  border-right-style: none;
+}
+
+/**
+* Responsive border style utilities.
+*
+* naming convention: gl-{breakpoint}-border-{position}-{style}
+*/
+@mixin gl-md-border-l-solid {
+  @include gl-media-breakpoint-up(md) {
+    border-left-style: solid;
+  }
+}
+
+/**
+* Border color utilities.
+*
+* naming convention: gl-border-{position}-{color-palette-variable}
+* notes:
+* - Prefer design system color palette. See variables.scss
+* for a comprehensive list.
+*/
+@mixin gl-border-white {
+  border-color: $white;
+}
+
+@mixin gl-border-transparent {
+  border-color: transparent;
+}
+
+@mixin gl-border-t-transparent {
+  border-top-color: transparent;
+}
+
+@mixin gl-border-r-transparent {
+  border-right-color: transparent;
+}
+
+@mixin gl-border-b-transparent {
+  border-bottom-color: transparent;
+}
+
+@mixin gl-border-l-transparent {
+  border-left-color: transparent;
+}
+
+@mixin gl-border-gray-10 {
+  border-color: $gray-10;
+}
+
+@mixin gl-border-gray-50 {
+  border-color: $gray-50;
+}
+
+@mixin gl-border-gray-100($hover: true) {
+  border-color: $gray-100;
+}
+
+@mixin gl-border-gray-200($active: true, $focus: true, $hover: true) {
+  border-color: $gray-200;
+}
+
+@mixin gl-border-gray-300 {
+  border-color: $gray-300;
+}
+
+@mixin gl-border-gray-400 {
+  border-color: $gray-400;
+}
+
+@mixin gl-border-gray-500 {
+  border-color: $gray-500;
+}
+
+@mixin gl-border-red-500 {
+  border-color: $red-500;
+}
+
+@mixin gl-border-orange-500 {
+  border-color: $orange-500;
+}
+
+@mixin gl-border-green-500 {
+  border-color: $green-500;
+}
+
+@mixin gl-border-blue-200($hover: true) {
+  border-color: $blue-200;
+}
+
+@mixin gl-border-blue-300 {
+  border-color: $blue-300;
+}
+
+@mixin gl-border-blue-500 {
+  border-color: $blue-500;
+}
+
+@mixin gl-border-blue-600 {
+  border-color: $blue-600;
+}
+
+@mixin gl-border-blue-700 {
+  border-color: $blue-700;
+}
+
+@mixin gl-border-purple-300 {
+  border-color: $purple-300;
+}
+
+@mixin gl-border-purple-500 {
+  border-color: $purple-500;
+}
+
+@mixin gl-border-purple-700 {
+  border-color: $purple-700;
+}
+
+@mixin gl-border-gray-a-08 {
+  border-color: $t-gray-a-08;
+}
+
+@mixin gl-border-gray-a-24 {
+  border-color: $t-gray-a-24;
+}
+
+@mixin gl-border-t-gray-100 {
+  border-top-color: $gray-100;
+}
+
+@mixin gl-border-t-gray-200 {
+  border-top-color: $gray-200;
+}
+
+@mixin gl-border-r-gray-100 {
+  border-right-color: $gray-100;
+}
+
+@mixin gl-border-r-gray-200 {
+  border-right-color: $gray-200;
+}
+
+@mixin gl-border-b-gray-10 {
+  border-bottom-color: $gray-10;
+}
+
+@mixin gl-border-b-gray-50 {
+  border-bottom-color: $gray-50;
+}
+
+@mixin gl-border-b-gray-100 {
+  border-bottom-color: $gray-100;
+}
+
+@mixin gl-border-b-gray-200 {
+  border-bottom-color: $gray-200;
+}
+
+@mixin gl-border-l-gray-50 {
+  border-left-color: $gray-50;
+}
+
+@mixin gl-border-l-gray-100 {
+  border-left-color: $gray-100;
+}
+
+@mixin gl-border-l-gray-200 {
+  border-left-color: $gray-200;
+}
+
+@mixin gl-border-l-gray-500 {
+  border-left-color: $gray-500;
+}
+
+@mixin gl-border-t-blue-600 {
+  border-top-color: $blue-600;
+}
+
+@mixin gl-border-r-blue-600 {
+  border-right-color: $blue-600;
+}
+
+@mixin gl-border-b-blue-600 {
+  border-bottom-color: $blue-600;
+}
+
+@mixin gl-border-l-blue-600 {
+  border-left-color: $blue-600;
+}
+
+@mixin gl-border-t-red-500 {
+  border-top-color: $red-500;
+}
+
+/**
+* Border width utilities.
+*
+* naming convention: gl-border-{position}-{border-width}
+* notes:
+* - Base new utilities in this group in the $gl-border-size variable
+*/
+@mixin gl-border-0 {
+  border-width: 0;
+}
+
+@mixin gl-border-t-0 {
+  border-top-width: 0;
+}
+
+@mixin gl-border-b-0 {
+  border-bottom-width: 0;
+}
+
+@mixin gl-border-l-0 {
+  border-left-width: 0;
+}
+
+@mixin gl-border-r-0 {
+  border-right-width: 0;
+}
+
+@mixin gl-border-1 {
+  border-width: $gl-border-size-1;
+}
+
+@mixin gl-border-2 {
+  border-width: $gl-border-size-2;
+}
+
+@mixin gl-border-3 {
+  border-width: $gl-border-size-3;
+}
+
+@mixin gl-border-4 {
+  border-width: $gl-border-size-4;
+}
+
+@mixin gl-border-8 {
+  border-width: $gl-border-size-8;
+}
+
+@mixin gl-border-t-1 {
+  border-top-width: $gl-border-size-1;
+}
+
+@mixin gl-border-b-1 {
+  border-bottom-width: $gl-border-size-1;
+}
+
+@mixin gl-border-l-1 {
+  border-left-width: $gl-border-size-1;
+}
+
+@mixin gl-border-l-4 {
+  border-left-width: $gl-border-size-4;
+}
+
+@mixin gl-border-r-1 {
+  border-right-width: $gl-border-size-1;
+}
+
+@mixin gl-border-t-2 {
+  border-top-width: $gl-border-size-2;
+}
+
+@mixin gl-border-b-2 {
+  border-bottom-width: $gl-border-size-2;
+}
+
+@mixin gl-border-r-2 {
+  border-right-width: $gl-border-size-2;
+}
+
+@mixin gl-border-top-0 {
+  border-top: 0;
+}
+
+@mixin gl-border-right-0 {
+  border-right: 0;
+}
+@mixin gl-border-bottom-0 {
+  border-bottom: 0;
+}
+
+@mixin gl-border-left-0 {
+  border-left: 0;
+}
+
+/**
+* Border radius utilities.
+*
+* naming convention: gl-rounded-{roundness-size}
+* notes:
+* - Base new utilities in this group in the $gl-border-radius variables
+*/
+@mixin gl-rounded-0 {
+  border-radius: 0;
+}
+
+@mixin gl-rounded-6 {
+  border-radius: $gl-border-radius-6;
+}
+
+@mixin gl-rounded-7 {
+  border-radius: $gl-border-radius-7;
+}
+
+@mixin gl-rounded-base($hover: true) {
+  border-radius: $gl-border-radius-base;
+}
+
+@mixin gl-rounded-full {
+  border-radius: $gl-border-radius-full;
+}
+
+@mixin gl-rounded-small {
+  border-radius: $gl-border-radius-small;
+}
+
+@mixin gl-rounded-lg {
+  border-radius: $gl-border-radius-large;
+}
+
+@mixin gl-rounded-pill {
+  border-radius: $gl-spacing-scale-4;
+}
+
+@mixin gl-rounded-left-none {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+@mixin gl-rounded-left-base {
+  border-top-left-radius: $gl-border-radius-base;
+  border-bottom-left-radius: $gl-border-radius-base;
+}
+
+@mixin gl-rounded-top-left-base {
+  border-top-left-radius: $gl-border-radius-base;
+}
+
+@mixin gl-rounded-top-left-none {
+  border-top-left-radius: 0;
+}
+
+@mixin gl-rounded-top-right-base {
+  border-top-right-radius: $gl-border-radius-base;
+}
+
+@mixin gl-rounded-top-right-none {
+  border-top-right-radius: 0;
+}
+
+@mixin gl-rounded-right-none {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+@mixin gl-rounded-top-base {
+  border-top-left-radius: $gl-border-radius-base;
+  border-top-right-radius: $gl-border-radius-base;
+}
+
+@mixin gl-rounded-bottom-left-small {
+  border-bottom-left-radius: $gl-border-radius-small;
+}
+
+@mixin gl-rounded-bottom-left-base {
+  border-bottom-left-radius: $gl-border-radius-base;
+}
+
+@mixin gl-rounded-bottom-left-large {
+  border-bottom-left-radius: $gl-border-radius-large;
+}
+
+@mixin gl-rounded-bottom-left-none {
+  border-bottom-left-radius: 0;
+}
+
+@mixin gl-rounded-bottom-right-small {
+  border-bottom-right-radius: $gl-border-radius-small;
+}
+
+@mixin gl-rounded-bottom-right-base {
+  border-bottom-right-radius: $gl-border-radius-base;
+}
+
+@mixin gl-rounded-bottom-right-large {
+  border-bottom-right-radius: $gl-border-radius-large;
+}
+
+@mixin gl-rounded-bottom-right-none {
+  border-bottom-right-radius: 0;
+}
+
+@mixin gl-rounded-bottom-base {
+  border-bottom-left-radius: $gl-border-radius-base;
+  border-bottom-right-radius: $gl-border-radius-base;
+}
+
+@mixin gl-rounded-top-left-small {
+  border-top-left-radius: $gl-border-radius-small;
+}
+
+@mixin gl-rounded-top-right-small {
+  border-top-right-radius: $gl-border-radius-small;
+}
+
+@mixin gl-rounded-bottom-left-6 {
+  border-bottom-left-radius: $gl-border-radius-6;
+}
+
+@mixin gl-rounded-bottom-right-6 {
+  border-bottom-right-radius: $gl-border-radius-6;
+}
+
+@mixin gl-rounded-top-left-6 {
+  border-top-left-radius: $gl-border-radius-6;
+}
+
+@mixin gl-rounded-top-right-6 {
+  border-top-right-radius: $gl-border-radius-6;
+}

package/src/scss/utility-mixins/box-shadow.scss

@@ -0,0 +1,220 @@
+/**
+* Inset border utilities
+*
+* Uses box-shadow: inset to create a border that does not
+* increase the box size of an element
+*
+* Naming convention: gl-inset-border-{border-position}-{border-size}-{color-name}
+*/
+
+@mixin gl-inset-border-1-gray-100 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $gray-100;
+}
+
+@mixin gl-inset-border-1-gray-200 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $gray-200;
+}
+
+@mixin gl-inset-border-1-gray-400 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $gray-400;
+}
+
+@mixin gl-inset-border-1-gray-600 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $gray-600;
+}
+
+@mixin gl-inset-border-2-gray-300 {
+  box-shadow: inset 0 0 0 $gl-border-size-2 $gray-300;
+}
+
+@mixin gl-inset-border-2-gray-400 {
+  box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400;
+}
+
+@mixin gl-inset-border-y-1-gray-200 {
+  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-200,
+    inset 0 -#{$gl-border-size-1} 0 0 $gray-200;
+}
+
+@mixin gl-inset-border-y-1-gray-100 {
+  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-100,
+    inset 0 -#{$gl-border-size-1} 0 0 $gray-100;
+}
+
+@mixin gl-inset-border-b-1-gray-100 {
+  box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-100;
+}
+
+@mixin gl-inset-border-b-2-gray-100 {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-100;
+}
+
+@mixin gl-inset-border-l-4-gray-100 {
+  box-shadow: inset #{$gl-border-size-4} 0 0 0 $gray-100;
+}
+
+@mixin gl-inset-border-b-1-gray-200 {
+  box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-200;
+}
+
+@mixin gl-inset-border-b-2-gray-200 {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-200;
+}
+
+@mixin gl-inset-border-b-1-gray-300 {
+  box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-300;
+}
+
+@mixin gl-inset-border-b-2-gray-300 {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-300;
+}
+
+@mixin gl-inset-border-b-2-gray-500 {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-500;
+}
+
+@mixin gl-inset-border-b-1-gray-900 {
+  box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-900;
+}
+
+@mixin gl-inset-border-1-blue-500 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $blue-500;
+}
+
+@mixin gl-inset-border-1-blue-600 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $blue-600;
+}
+
+@mixin gl-inset-border-b-2-blue-500 {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $blue-500;
+}
+
+@mixin gl-inset-border-1-green-500 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $green-500;
+}
+
+@mixin gl-inset-border-1-green-600 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $green-600;
+}
+
+@mixin gl-inset-border-2-blue-400($focus: true) {
+  box-shadow: inset 0 0 0 $gl-border-size-2 $blue-400;
+}
+
+@mixin gl-inset-border-2-green-400 {
+  box-shadow: inset 0 0 0 $gl-border-size-2 $green-400;
+}
+
+@mixin gl-inset-border-1-orange-500 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $orange-500;
+}
+
+@mixin gl-inset-border-1-orange-600 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $orange-600;
+}
+
+@mixin gl-inset-border-1-red-300 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $red-300;
+}
+
+@mixin gl-inset-border-1-red-400 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $red-400;
+}
+
+@mixin gl-inset-border-1-red-500 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $red-500;
+}
+
+@mixin gl-inset-border-1-red-600 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $red-600;
+}
+
+@mixin gl-inset-border-l-3-red-600 {
+  box-shadow: inset $gl-border-size-3 0 0 0 $red-600;
+}
+
+@mixin gl-inset-border-1-gray-a-08 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $t-gray-a-08;
+}
+
+@mixin gl-inset-border-b-2-theme-accent {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500);
+}
+
+@mixin gl-inset-border-b-2-theme-indigo-500 {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-indigo-500;
+}
+
+@mixin gl-inset-border-b-2-theme-indigo-300 {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-indigo-300;
+}
+
+@mixin gl-inset-border-b-2-theme-red-500 {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-red-500;
+}
+
+@mixin gl-inset-border-b-2-theme-light-red-500 {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-light-red-500;
+}
+
+@mixin gl-inset-border-b-2-theme-blue-500 {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-blue-500;
+}
+
+@mixin gl-inset-border-b-2-theme-light-blue-500 {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-light-blue-500;
+}
+
+@mixin gl-inset-border-b-2-theme-green-300 {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-green-300;
+}
+
+@mixin gl-inset-border-b-2-theme-green-500 {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-green-500;
+}
+
+/**
+* Box shadow utilities
+*
+* naming convention: gl-shadow-{config-name}
+*/
+@mixin gl-shadow-none {
+  box-shadow: none;
+}
+
+@mixin gl-shadow {
+  box-shadow: 0 1px 4px 0 rgba(#000, 0.3);
+}
+
+@mixin gl-shadow-x0-y2-b4-s0 {
+  box-shadow: 0 2px 4px 0 rgba(#000, 0.1);
+}
+
+@mixin gl-shadow-blue-200-x0-y0-b4-s2 {
+  box-shadow: 0 0 4px 2px $blue-200;
+}
+
+@mixin gl-shadow-x0-y0-b3-s1-blue-500 {
+  box-shadow: inset 0 0 3px 1px $blue-500;
+}
+
+/**
+* New utilities to match design specs
+* Per https: //gitlab.com/gitlab-org/gitlab-ui/-/issues/615,
+* some of the above could be replaced.
+*
+* These use gray instead of black to align with
+* tinted neutrals.
+*/
+
+@mixin gl-shadow-sm {
+  box-shadow: 0 1px 2px var(--gl-shadow-color-default);
+}
+
+@mixin gl-shadow-md {
+  box-shadow: 0 2px 8px var(--gl-shadow-color-default), 0 0 2px var(--gl-shadow-color-default);
+}
+
+@mixin gl-shadow-lg {
+  box-shadow: 0 4px 12px var(--gl-shadow-color-default), 0 0 4px var(--gl-shadow-color-default);
+}

package/src/scss/utility-mixins/clearfix.scss

@@ -0,0 +1,9 @@
+// See https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_clearfix.scss
+
+@mixin gl-clearfix {
+  &::after {
+    display: block;
+    clear: both;
+    content: '';
+  }
+}