@gitlab/ui 76.0.1 → 77.0.0

package/src/scss/utilities.scss

@@ -122,24 +122,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
     animation-iteration-count: 3 !important;
   }
 }
-.gl-number-as-text-input {
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  -moz-appearance: textfield;
-}
-.gl-number-as-text-input\! {
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none !important;
-    margin: 0 !important;
-  }
-
-  -moz-appearance: textfield !important;
-}
 .gl-bg-transparent {
   background-color: transparent
 }
@@ -3010,6 +2992,30 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-cursor-help\! {
   cursor: help !important
 }
+.gl-deprecated-top-66vh {
+  top: 66vh;
+}
+.gl-deprecated-top-66vh\! {
+  top: 66vh !important;
+}
+.gl-number-as-text-input {
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  -moz-appearance: textfield;
+}
+.gl-number-as-text-input\! {
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none !important;
+    margin: 0 !important;
+  }
+
+  -moz-appearance: textfield !important;
+}
 .gl-display-none {
   display: none;
 }
@@ -4157,7 +4163,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-object-fit-contain\! {
   object-fit: contain !important
 }
-
 .gl-list-style-none {
   list-style-type: none
 }
@@ -4337,417 +4342,6 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-pointer-events-auto\! {
   pointer-events: auto !important
 }
-.gl-relative {
-  position: relative;
-}
-
-.gl-relative\! {
-  position: relative !important;
-}
-
-.gl-absolute {
-  position: absolute;
-}
-
-.gl-absolute\! {
-  position: absolute !important;
-}
-
-.gl-static {
-  position: static;
-}
-
-.gl-static\! {
-  position: static !important;
-}
-
-.gl-fixed {
-  position: fixed;
-}
-
-.gl-fixed\! {
-  position: fixed !important;
-}
-
-.gl-sticky {
-  position: sticky;
-}
-
-.gl-sticky\! {
-  position: sticky !important;
-}
-
-.gl-lg-sticky {
-  @include gl-media-breakpoint-up(lg) {
-  position: sticky;
-  }
-}
-
-.gl-lg-sticky\! {
-  @include gl-media-breakpoint-up(lg) {
-  position: sticky !important;
-  }
-}
-
-.gl-top-auto {
-  top: auto;
-}
-
-.gl-top-auto\! {
-  top: auto !important;
-}
-
-.gl-top-0 {
-  top: 0;
-}
-
-.gl-top-0\! {
-  top: 0 !important;
-}
-
-.gl-top-1 {
-  top: $gl-spacing-scale-1;
-}
-
-.gl-top-1\! {
-  top: $gl-spacing-scale-1 !important;
-}
-
-.gl-top-2 {
-  top: $gl-spacing-scale-2;
-}
-
-.gl-top-2\! {
-  top: $gl-spacing-scale-2 !important;
-}
-
-.gl-top-3 {
-  top: $gl-spacing-scale-3;
-}
-
-.gl-top-3\! {
-  top: $gl-spacing-scale-3 !important;
-}
-
-.gl-top-4 {
-  top: $gl-spacing-scale-4;
-}
-
-.gl-top-4\! {
-  top: $gl-spacing-scale-4 !important;
-}
-
-.gl-top-5 {
-  top: $gl-spacing-scale-5;
-}
-
-.gl-top-5\! {
-  top: $gl-spacing-scale-5 !important;
-}
-
-.gl-top-6 {
-  top: $gl-spacing-scale-6;
-}
-
-.gl-top-6\! {
-  top: $gl-spacing-scale-6 !important;
-}
-
-.gl-top-7 {
-  top: $gl-spacing-scale-7;
-}
-
-.gl-top-7\! {
-  top: $gl-spacing-scale-7 !important;
-}
-
-.gl-top-8 {
-  top: $gl-spacing-scale-8;
-}
-
-.gl-top-8\! {
-  top: $gl-spacing-scale-8 !important;
-}
-
-.gl-top-half {
-  top: 50%;
-}
-
-.gl-top-half\! {
-  top: 50% !important;
-}
-
-.gl-top-66vh {
-  top: 66vh;
-}
-
-.gl-top-66vh\! {
-  top: 66vh !important;
-}
-
-.gl-top-full {
-  top: 100%;
-}
-
-.gl-top-full\! {
-  top: 100% !important;
-}
-
-.gl-right-auto {
-  right: auto;
-}
-
-.gl-right-auto\! {
-  right: auto !important;
-}
-
-.gl-right-0 {
-  right: 0;
-}
-
-.gl-right-0\! {
-  right: 0 !important;
-}
-
-.gl-right-1 {
-  right: $gl-spacing-scale-1;
-}
-
-.gl-right-1\! {
-  right: $gl-spacing-scale-1 !important;
-}
-
-.gl-right-2 {
-  right: $gl-spacing-scale-2;
-}
-
-.gl-right-2\! {
-  right: $gl-spacing-scale-2 !important;
-}
-
-.gl-right-3 {
-  right: $gl-spacing-scale-3;
-}
-
-.gl-right-3\! {
-  right: $gl-spacing-scale-3 !important;
-}
-
-.gl-right-4 {
-  right: $gl-spacing-scale-4;
-}
-
-.gl-right-4\! {
-  right: $gl-spacing-scale-4 !important;
-}
-
-.gl-right-5 {
-  right: $gl-spacing-scale-5;
-}
-
-.gl-right-5\! {
-  right: $gl-spacing-scale-5 !important;
-}
-
-.gl-right-6 {
-  right: $gl-spacing-scale-6;
-}
-
-.gl-right-6\! {
-  right: $gl-spacing-scale-6 !important;
-}
-
-.gl-right-7 {
-  right: $gl-spacing-scale-7;
-}
-
-.gl-right-7\! {
-  right: $gl-spacing-scale-7 !important;
-}
-
-.gl-bottom-0 {
-  bottom: 0;
-}
-
-.gl-bottom-0\! {
-  bottom: 0 !important;
-}
-
-.gl-bottom-1 {
-  bottom: $gl-spacing-scale-1;
-}
-
-.gl-bottom-1\! {
-  bottom: $gl-spacing-scale-1 !important;
-}
-
-.gl-bottom-2 {
-  bottom: $gl-spacing-scale-2;
-}
-
-.gl-bottom-2\! {
-  bottom: $gl-spacing-scale-2 !important;
-}
-
-.gl-bottom-3 {
-  bottom: $gl-spacing-scale-3;
-}
-
-.gl-bottom-3\! {
-  bottom: $gl-spacing-scale-3 !important;
-}
-
-.gl-bottom-4 {
-  bottom: $gl-spacing-scale-4;
-}
-
-.gl-bottom-4\! {
-  bottom: $gl-spacing-scale-4 !important;
-}
-
-.gl-bottom-5 {
-  bottom: $gl-spacing-scale-5;
-}
-
-.gl-bottom-5\! {
-  bottom: $gl-spacing-scale-5 !important;
-}
-
-.gl-bottom-6 {
-  bottom: $gl-spacing-scale-6;
-}
-
-.gl-bottom-6\! {
-  bottom: $gl-spacing-scale-6 !important;
-}
-
-.gl-bottom-7 {
-  bottom: $gl-spacing-scale-7;
-}
-
-.gl-bottom-7\! {
-  bottom: $gl-spacing-scale-7 !important;
-}
-
-.gl-left-auto {
-  left: auto;
-}
-
-.gl-left-auto\! {
-  left: auto !important;
-}
-
-.gl-left-0 {
-  left: 0;
-}
-
-.gl-left-0\! {
-  left: 0 !important;
-}
-
-.gl-left-1 {
-  left: $gl-spacing-scale-1;
-}
-
-.gl-left-1\! {
-  left: $gl-spacing-scale-1 !important;
-}
-
-.gl-left-2 {
-  left: $gl-spacing-scale-2;
-}
-
-.gl-left-2\! {
-  left: $gl-spacing-scale-2 !important;
-}
-
-.gl-left-3 {
-  left: $gl-spacing-scale-3;
-}
-
-.gl-left-3\! {
-  left: $gl-spacing-scale-3 !important;
-}
-
-.gl-left-4 {
-  left: $gl-spacing-scale-4;
-}
-
-.gl-left-4\! {
-  left: $gl-spacing-scale-4 !important;
-}
-
-.gl-left-5 {
-  left: $gl-spacing-scale-5;
-}
-
-.gl-left-5\! {
-  left: $gl-spacing-scale-5 !important;
-}
-
-.gl-left-6 {
-  left: $gl-spacing-scale-6;
-}
-
-.gl-left-6\! {
-  left: $gl-spacing-scale-6 !important;
-}
-
-.gl-left-7 {
-  left: $gl-spacing-scale-7;
-}
-
-.gl-left-7\! {
-  left: $gl-spacing-scale-7 !important;
-}
-
-.gl-left-n5 {
-  left: -$gl-spacing-scale-5;
-}
-
-.gl-left-n5\! {
-  left: -$gl-spacing-scale-5 !important;
-}
-
-.gl-left-n37 {
-  left: -$gl-spacing-scale-37;
-}
-
-.gl-left-n37\! {
-  left: -$gl-spacing-scale-37 !important;
-}
-
-.gl-left-50p {
-  left: 50%;
-}
-
-.gl-left-50p\! {
-  left: 50% !important;
-}
-
-.gl-top-n5 {
-  top: -$gl-spacing-scale-5;
-}
-
-.gl-top-n5\! {
-  top: -$gl-spacing-scale-5 !important;
-}
-
-.gl-float-left {
-  float: left;
-}
-
-.gl-float-left\! {
-  float: left !important;
-}
-
-.gl-float-right {
-  float: right;
-}
-
-.gl-float-right\! {
-  float: right !important;
-}
 .gl-w-auto {
   width: auto;
 }

package/src/scss/utility-mixins/{appearance.scss → deprecated.scss}

@@ -1,3 +1,12 @@
+/**
+* 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,

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

@@ -17,7 +17,6 @@
 
 @import './accessibility';
 @import './animation';
-@import './appearance';
 @import './background';
 @import './border';
 @import './box-shadow';
@@ -33,7 +32,6 @@
 @import './outline';
 @import './overflow';
 @import './pointer-events';
-@import './position';
 @import './sizing';
 @import './spacing';
 @import './svg';
@@ -44,3 +42,6 @@
 @import './vertical-align';
 @import './visibility';
 @import './z-index';
+
+// Deprecated mixins that don't have a migration path yet
+@import './deprecated';

package/src/tokens/common_story_options.js

@@ -10,20 +10,34 @@ export const methods = {
   isAlpha(value) {
     return value.startsWith('rgba(');
   },
+  isBackgroundColor(property) {
+    return property === 'backgroundColor';
+  },
   getTokenName(token) {
     return token.path.filter(Boolean).join('.');
   },
-  getTextColorClass(value) {
+  getClasses(property, value) {
     if (this.isAlpha(value)) return '';
+    if (!this.isBackgroundColor(property)) return '';
     const textColorVariant = colorFromBackground(value, 4.5);
     return {
       'gl-text-gray-950': textColorVariant === 'dark',
       'gl-text-white': textColorVariant === 'light',
     };
   },
+  getStyle(property, value) {
+    if (this.isBackgroundColor(property)) {
+      return { backgroundColor: value };
+    }
+    return { color: value };
+  },
 };
 
-export const template = (lightBackground = WHITE, darkBackground = GRAY_950) => `
+const colorTemplate = (
+  property = 'backgroundColor',
+  lightBackground = WHITE,
+  darkBackground = GRAY_950
+) => `
   <ul
     class="gl-list-style-none gl-m-0 gl-p-0"
   >
@@ -31,8 +45,8 @@ export const template = (lightBackground = WHITE, darkBackground = GRAY_950) =>
       v-for="token in tokens"
       :key="token.name"
       class="gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3"
-      :class="getTextColorClass(token.value)"
-      :style="{ backgroundColor: token.value }"
+      :class="getClasses('${property}', token.value)"
+      :style="getStyle('${property}', token.value)"
     >
       <code class="gl-reset-color">{{ getTokenName(token) }}</code>
       <div class="gl-display-flex gl-align-items-center gl-gap-3">
@@ -47,5 +61,11 @@ export const template = (lightBackground = WHITE, darkBackground = GRAY_950) =>
 export const colorTokenStoryOptions = {
   components,
   methods,
-  template: template(),
+  template: colorTemplate('backgroundColor'),
+};
+
+export const colorTextTokenStoryOptions = {
+  components,
+  methods,
+  template: colorTemplate('color'),
 };

package/src/tokens/text.tokens.json

@@ -0,0 +1,19 @@
+{
+  "text": {
+    "primary": {
+      "$value": "{gray.900}",
+      "$type": "color",
+      "themeable": true
+    },
+    "secondary": {
+      "$value": "{gray.500}",
+      "$type": "color",
+      "themeable": true
+    },
+    "tertiary": {
+      "$value": "{gray.400}",
+      "$type": "color",
+      "themeable": true
+    }
+  }
+}

package/src/tokens/text.tokens.stories.js

@@ -0,0 +1,15 @@
+import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
+import { colorTextTokenStoryOptions } from './common_story_options';
+
+const generateProps = ({ tokens = {} } = {}) => ({ tokens });
+
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  ...colorTextTokenStoryOptions,
+});
+Default.args = generateProps({ name: 'text', tokens: COMPILED_TOKENS.text });
+
+// eslint-disable-next-line storybook/csf-component
+export default {
+  title: 'tokens/text',
+};