@gitlab/duo-ui 0.1.0 → 0.2.0

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

@@ -1,228 +0,0 @@
-/**
-* Text color utilities.
-*
-* naming convention: gl-text-{color-palette-variable-name}
-* notes:
-* - Strictly based design system color palette. See variables.scss
-* for a comprehensive list.
-*/
-
-@mixin gl-reset-color {
-  color: inherit;
-}
-
-@mixin gl-text-transparent {
-  color: transparent;
-}
-
-@mixin gl-text-white($hover: true) {
-  color: $white;
-}
-
-@mixin gl-text-contrast-light {
-  color: $white-contrast;
-}
-
-@mixin gl-text-body {
-  color: $body-color;
-}
-
-@mixin gl-text-secondary {
-  color: $gl-text-color-secondary;
-}
-
-@mixin gl-sm-text-body {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-text-body;
-  }
-}
-
-@mixin gl-text-black-normal {
-  color: $black-normal;
-}
-
-@mixin gl-text-gray-100 {
-  color: $gray-100;
-}
-
-@mixin gl-text-gray-200 {
-  color: $gray-200;
-}
-
-@mixin gl-text-gray-300 {
-  color: $gray-300;
-}
-
-@mixin gl-text-gray-400 {
-  color: $gray-400;
-}
-
-@mixin gl-text-gray-500 {
-  color: $gray-500;
-}
-
-@mixin gl-text-gray-600 {
-  color: $gray-600;
-}
-
-@mixin gl-text-gray-700 {
-  color: $gray-700;
-}
-
-@mixin gl-text-gray-800 {
-  color: $gray-800;
-}
-
-@mixin gl-text-gray-900($active: true, $focus: true, $hover: true) {
-  color: $gray-900;
-}
-
-@mixin gl-text-gray-950 {
-  color: $gray-950;
-}
-
-@mixin gl-text-blue-200 {
-  color: $blue-200;
-}
-
-@mixin gl-text-blue-300 {
-  color: $blue-300;
-}
-
-@mixin gl-text-blue-400 {
-  color: $blue-400;
-}
-
-@mixin gl-text-blue-500 {
-  color: $blue-500;
-}
-
-@mixin gl-text-blue-600($hover: true) {
-  color: $blue-600;
-}
-
-@mixin gl-text-blue-700 {
-  color: $blue-700;
-}
-
-@mixin gl-text-blue-800($hover: true) {
-  color: $blue-800;
-}
-
-@mixin gl-text-blue-900 {
-  color: $blue-900;
-}
-
-@mixin gl-text-green-400 {
-  color: $green-400;
-}
-
-@mixin gl-text-green-500 {
-  color: $green-500;
-}
-
-@mixin gl-text-green-600 {
-  color: $green-600;
-}
-
-@mixin gl-text-green-700 {
-  color: $green-700;
-}
-
-@mixin gl-text-green-800 {
-  color: $green-800;
-}
-
-@mixin gl-text-green-900 {
-  color: $green-900;
-}
-
-@mixin gl-text-theme-green-800 {
-  color: $theme-green-800;
-}
-
-@mixin gl-text-orange-300 {
-  color: $orange-300;
-}
-
-@mixin gl-text-orange-400 {
-  color: $orange-400;
-}
-
-@mixin gl-text-orange-500 {
-  color: $orange-500;
-}
-
-@mixin gl-text-orange-600 {
-  color: $orange-600;
-}
-
-@mixin gl-text-orange-700 {
-  color: $orange-700;
-}
-
-@mixin gl-text-orange-800 {
-  color: $orange-800;
-}
-
-@mixin gl-text-orange-900 {
-  color: $orange-900;
-}
-
-@mixin gl-text-red-300 {
-  color: $red-300;
-}
-
-@mixin gl-text-red-500 {
-  color: $red-500;
-}
-
-@mixin gl-text-red-600 {
-  color: $red-600;
-}
-
-@mixin gl-text-red-700 {
-  color: $red-700;
-}
-
-@mixin gl-text-red-800 {
-  color: $red-800;
-}
-
-@mixin gl-text-red-900 {
-  color: $red-900;
-}
-
-@mixin gl-text-purple-500 {
-  color: $purple-500;
-}
-
-@mixin gl-text-purple-600 {
-  color: $purple-600;
-}
-
-@mixin gl-text-purple-700 {
-  color: $purple-700;
-}
-
-@mixin gl-text-purple-800 {
-  color: $purple-800;
-}
-
-@mixin gl-text-theme-indigo-200 {
-  color: $theme-indigo-200;
-}
-
-@mixin gl-text-theme-indigo-300 {
-  color: $theme-indigo-300;
-}
-
-@mixin gl-text-theme-indigo-900 {
-  color: $theme-indigo-900;
-}
-
-@mixin gl-dark-invert-keep-hue {
-  .gl-dark & {
-    filter: invert(0.8) hue-rotate(180deg);
-  }
-}

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

@@ -1,24 +0,0 @@
-//
-// Composite utilities
-//
-// naming convention: gl--{name}
-// purpose: This is for composite classes that provide significant readability and maintainability profit.
-//
-// PLEASE NOTE: When considering to abstract a set of utility classes, please prefer, in order:
-//   1. Not abstracting
-//   2. Create a component
-//   3. Create a constant scoped within a specific module
-//   4. Create a composite class if there are many preexisting occurrences with a clear design responsibility
-//
-// notes:
-//   - Composite classes should be very short and not have any nested rules.
-//
-@mixin gl--flex-center {
-  @include gl-display-flex;
-  @include gl-align-items-center;
-  @include gl-justify-content-center;
-}
-
-@mixin gl--focus($focus: true) {
-  @include gl-focus;
-}

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

@@ -1,36 +0,0 @@
-/**
-* Cursor utilities
-*
-* naming convention: gl-cursor-{property-value}
-*/
-@mixin gl-cursor-default {
-  cursor: default;
-}
-
-@mixin gl-cursor-pointer($hover: true) {
-  cursor: pointer;
-}
-
-@mixin gl-cursor-grab {
-  cursor: grab;
-}
-
-@mixin gl-cursor-grabbing {
-  cursor: grabbing;
-}
-
-@mixin gl-cursor-not-allowed($hover: true) {
-  cursor: not-allowed;
-}
-
-@mixin gl-cursor-text {
-  cursor: text;
-}
-
-@mixin gl-cursor-crosshair($hover: true) {
-  cursor: crosshair;
-}
-
-@mixin gl-cursor-help {
-  cursor: help;
-}

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

@@ -1,20 +0,0 @@
-/**
-* This file contains deprecated utility mixins that we don't have an immediate migration path for.
-* Please do not add any mixin in here unless you're actively working on migrating to Tailwind CSS.
-*/
-
-@mixin gl-deprecated-top-66vh {
-  top: 66vh;
-}
-
-/* stylelint-disable property-no-vendor-prefix */
-@mixin gl-number-as-text-input {
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  -moz-appearance: textfield;
-}
-/* stylelint-enable property-no-vendor-prefix */

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

@@ -1,192 +0,0 @@
-/**
-* Display utilities
-*
-* Naming convention gl-display-{property-value}
-*/
-@mixin gl-display-none {
-  display: none;
-}
-
-@mixin gl-sm-display-none {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-display-none;
-  }
-}
-
-@mixin gl-md-display-none {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-display-none;
-  }
-}
-
-@mixin gl-lg-display-none {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-display-none;
-  }
-}
-
-@mixin gl-display-flex {
-  display: flex;
-}
-
-@mixin gl-sm-display-flex {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-display-flex;
-  }
-}
-
-@mixin gl-md-display-flex {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-display-flex;
-  }
-}
-
-@mixin gl-lg-display-flex {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-display-flex;
-  }
-}
-
-@mixin gl-display-inline-flex {
-  display: inline-flex;
-}
-
-@mixin gl-sm-display-inline-flex {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-display-inline-flex;
-  }
-}
-
-@mixin gl-md-display-inline-flex {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-display-inline-flex;
-  }
-}
-
-@mixin gl-lg-display-inline-flex {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-display-inline-flex;
-  }
-}
-
-@mixin gl-display-block {
-  display: block;
-}
-
-@mixin gl-sm-display-block {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-display-block;
-  }
-}
-
-@mixin gl-md-display-block {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-display-block;
-  }
-}
-
-@mixin gl-lg-display-block {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-display-block;
-  }
-}
-
-@mixin gl-display-inline {
-  display: inline;
-}
-
-@mixin gl-sm-display-inline {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-display-inline;
-  }
-}
-
-@mixin gl-md-display-inline {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-display-inline;
-  }
-}
-
-@mixin gl-lg-display-inline {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-display-inline;
-  }
-}
-
-@mixin gl-display-inline-block {
-  display: inline-block;
-}
-
-@mixin gl-sm-display-inline-block {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-display-inline-block;
-  }
-}
-
-@mixin gl-md-display-inline-block {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-display-inline-block;
-  }
-}
-
-@mixin gl-lg-display-inline-block {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-display-inline-block;
-  }
-}
-
-@mixin gl-display-table {
-  display: table;
-}
-
-@mixin gl-display-table-row {
-  display: table-row;
-}
-
-@mixin gl-display-table-cell {
-  display: table-cell;
-}
-
-@mixin gl-display-grid {
-  display: grid;
-}
-
-@mixin gl-sm-display-grid {
-  @include gl-media-breakpoint-up(sm) {
-    display: grid;
-  }
-}
-
-@mixin gl-md-display-grid {
-  @include gl-media-breakpoint-up(md) {
-    display: grid;
-  }
-}
-
-@mixin gl-lg-display-grid {
-  @include gl-media-breakpoint-up(lg) {
-    display: grid;
-  }
-}
-
-@mixin gl-sm-display-table-cell {
-  @include gl-media-breakpoint-up(sm) {
-    @include gl-display-table-cell;
-  }
-}
-
-@mixin gl-md-display-table-cell {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-display-table-cell;
-  }
-}
-
-@mixin gl-lg-display-table-cell {
-  @include gl-media-breakpoint-up(lg) {
-    @include gl-display-table-cell;
-  }
-}
-
-@mixin gl-display-contents {
-  display: contents;
-}