@gitlab/ui 79.2.0 → 79.4.0

package/dist/tokens/json/tokens.json

@@ -4800,12 +4800,16 @@
     "primary": {
       "value": "#333238",
       "$type": "color",
+      "comment": "Use text.color.strong instead",
+      "deprecated": true,
       "themeable": true,
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
       "isSource": false,
       "original": {
         "value": "#333238",
         "$type": "color",
+        "comment": "Use text.color.strong instead",
+        "deprecated": true,
         "themeable": true
       },
       "name": "TEXT_PRIMARY",
@@ -4818,12 +4822,16 @@
     "secondary": {
       "value": "#737278",
       "$type": "color",
+      "comment": "Use text.color.subtle instead",
+      "deprecated": true,
       "themeable": true,
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
       "isSource": false,
       "original": {
         "value": "#737278",
         "$type": "color",
+        "comment": "Use text.color.subtle instead",
+        "deprecated": true,
         "themeable": true
       },
       "name": "TEXT_SECONDARY",
@@ -4836,12 +4844,16 @@
     "tertiary": {
       "value": "#89888d",
       "$type": "color",
+      "comment": "Use text.color.disabled instead",
+      "deprecated": true,
       "themeable": true,
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
       "isSource": false,
       "original": {
         "value": "#89888d",
         "$type": "color",
+        "comment": "Use text.color.disabled instead",
+        "deprecated": true,
         "themeable": true
       },
       "name": "TEXT_TERTIARY",
@@ -4850,6 +4862,176 @@
         "text",
         "tertiary"
       ]
+    },
+    "color": {
+      "default": {
+        "value": "#434248",
+        "$type": "color",
+        "comment": "Used for the default text color.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#434248",
+          "$type": "color",
+          "comment": "Used for the default text color.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "default"
+        ]
+      },
+      "subtle": {
+        "value": "#626168",
+        "$type": "color",
+        "comment": "Used for supplemental text that doesn't need to be as prominent as other text.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#626168",
+          "$type": "color",
+          "comment": "Used for supplemental text that doesn't need to be as prominent as other text.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_SUBTLE",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "subtle"
+        ]
+      },
+      "strong": {
+        "value": "#1f1e24",
+        "$type": "color",
+        "comment": "Used for text with the highest contrast.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#1f1e24",
+          "$type": "color",
+          "comment": "Used for text with the highest contrast.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_STRONG",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "strong"
+        ]
+      },
+      "heading": {
+        "value": "#1f1e24",
+        "$type": "color",
+        "comment": "Used for headings level 1-6.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#1f1e24",
+          "$type": "color",
+          "comment": "Used for headings level 1-6.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_HEADING",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "heading"
+        ]
+      },
+      "link": {
+        "value": "#0b5cad",
+        "$type": "color",
+        "comment": "Used for default text links.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#0b5cad",
+          "$type": "color",
+          "comment": "Used for default text links.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_LINK",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "link"
+        ]
+      },
+      "danger": {
+        "value": "#c91c00",
+        "$type": "color",
+        "comment": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#c91c00",
+          "$type": "color",
+          "comment": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_DANGER",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "danger"
+        ]
+      },
+      "success": {
+        "value": "#217645",
+        "$type": "color",
+        "comment": "Used for text indicating success or validity.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#217645",
+          "$type": "color",
+          "comment": "Used for text indicating success or validity.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_SUCCESS",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "success"
+        ]
+      },
+      "disabled": {
+        "value": "#89888d",
+        "$type": "color",
+        "comment": "Used for disabled text.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#89888d",
+          "$type": "color",
+          "comment": "Used for disabled text.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_DISABLED",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "disabled"
+        ]
+      }
     }
   }
 }

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,10 +1,16 @@
 
 // Do not edit directly
-// Generated on Wed, 24 Apr 2024 16:36:49 GMT
+// Generated on Thu, 25 Apr 2024 15:30:17 GMT
 
-$gl-text-tertiary: #737278 !default;
-$gl-text-secondary: #89888d !default;
-$gl-text-primary: #ececef !default;
+$gl-text-color-disabled: #89888d !default; // Used for disabled text.
+$gl-text-color-link: #63a6e9 !default; // Used for default text links.
+$gl-text-color-heading: #fff !default; // Used for headings level 1-6.
+$gl-text-color-strong: #fff !default; // Used for text with the highest contrast.
+$gl-text-color-subtle: #bfbfc3 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
+$gl-text-color-default: #ececef !default; // Used for the default text color.
+$gl-text-tertiary: #737278 !default; // Use text.color.disabled instead
+$gl-text-secondary: #89888d !default; // Use text.color.subtle instead
+$gl-text-primary: #ececef !default; // Use text.color.strong instead
 $red-950: #fff4f3;
 $red-900: #fcf1ef;
 $red-800: #fdd4cd;

package/dist/tokens/scss/_tokens.scss

@@ -1,10 +1,18 @@
 
 // Do not edit directly
-// Generated on Wed, 24 Apr 2024 16:36:49 GMT
+// Generated on Thu, 25 Apr 2024 15:30:17 GMT
 
-$gl-text-tertiary: #89888d !default;
-$gl-text-secondary: #737278 !default;
-$gl-text-primary: #333238 !default;
+$gl-text-color-disabled: #89888d !default; // Used for disabled text.
+$gl-text-color-success: #217645 !default; // Used for text indicating success or validity.
+$gl-text-color-danger: #c91c00 !default; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
+$gl-text-color-link: #0b5cad !default; // Used for default text links.
+$gl-text-color-heading: #1f1e24 !default; // Used for headings level 1-6.
+$gl-text-color-strong: #1f1e24 !default; // Used for text with the highest contrast.
+$gl-text-color-subtle: #626168 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
+$gl-text-color-default: #434248 !default; // Used for the default text color.
+$gl-text-tertiary: #89888d !default; // Use text.color.disabled instead
+$gl-text-secondary: #737278 !default; // Use text.color.subtle instead
+$gl-text-primary: #333238 !default; // Use text.color.strong instead
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-42: 2.625rem;

package/dist/tokens/tokens_story.js

@@ -1,12 +1,18 @@
 import { colorFromBackground } from '../utils/utils';
+import { GlTooltipDirective } from '../directives/tooltip';
+import GlBadge from '../components/base/badge/badge';
 import GlColorContrast from '../internal/color_contrast/color_contrast';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'TokensStory',
   components: {
+    GlBadge,
     GlColorContrast
   },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
   inject: ['isBackgroundColorStory', 'lightBackground', 'darkBackground', 'containerClass'],
   props: {
     tokens: {
@@ -48,7 +54,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.containerClass},[_c('ul',{staticClass:"gl-list-style-none gl-m-0 gl-p-0"},_vm._l((_vm.tokens),function(token){return _c('li',{key:token.name,staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3",class:_vm.getClasses(token.value),style:(_vm.getStyle(token.value))},[_c('code',{staticClass:"gl-reset-color"},[_vm._v(_vm._s(_vm.getTokenName(token)))]),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-gap-3"},[_c('code',{staticClass:"gl-reset-color"},[_vm._v(_vm._s(token.value))]),_vm._v(" "),(!_vm.isAlpha(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.darkBackground}}):_vm._e(),_vm._v(" "),(!_vm.isAlpha(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.lightBackground}}):_vm._e()],1)])}),0)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.containerClass},[_c('ul',{staticClass:"gl-list-style-none gl-m-0 gl-p-0"},_vm._l((_vm.tokens),function(token){return _c('li',{key:token.name,staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3",class:_vm.getClasses(token.value),style:(_vm.getStyle(token.value))},[_c('code',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-reset-color",attrs:{"title":token.comment}},[_vm._v("\n        "+_vm._s(_vm.getTokenName(token))+"\n      ")]),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-gap-3"},[(token.deprecated)?_c('gl-badge',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":token.comment,"variant":"danger"}},[_vm._v("\n          Deprecated\n        ")]):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-reset-color"},[_vm._v(_vm._s(token.value))]),_vm._v(" "),(!_vm.isAlpha(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.darkBackground}}):_vm._e(),_vm._v(" "),(!_vm.isAlpha(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.lightBackground}}):_vm._e()],1)])}),0)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "79.2.0",
+  "version": "79.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/breadcrumb/breadcrumb.spec.js

@@ -29,6 +29,7 @@ describe('Breadcrumb component', () => {
   const findAllAvatars = () => wrapper.findAll('[data-testid="avatar"]');
   const findBreadcrumbItems = () => wrapper.findAllComponents(GlBreadcrumbItem);
   const findOverflowDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
+  const findOverflowingItems = () => wrapper.findAllComponents(GlDisclosureDropdownItem);
 
   const findVisibleBreadcrumbItems = () =>
     findBreadcrumbItems().wrappers.filter((item) => item.isVisible());
@@ -43,21 +44,24 @@ describe('Breadcrumb component', () => {
     });
   };
 
-  const mockWrapperWidth = (widthInPx) => {
-    wrapper.element.style.width = `${widthInPx}px`;
-
-    Object.defineProperty(wrapper.element, 'clientWidth', {
+  const mockElementWidth = (element, widthInPx) => {
+    Object.defineProperty(element, 'clientWidth', {
       get: () => widthInPx,
-      configurable: true,
     });
   };
 
   const mockWideWrapperWidth = () => {
-    mockWrapperWidth(1000);
+    mockElementWidth(wrapper.element, 1000);
   };
 
   const mockSmallWrapperWidth = () => {
-    mockWrapperWidth(1);
+    mockElementWidth(wrapper.element, 1);
+  };
+
+  const mockItemsWidths = () => {
+    findBreadcrumbItems().wrappers.forEach((item) => {
+      mockElementWidth(item.element, 100);
+    });
   };
 
   describe('items', () => {
@@ -88,6 +92,7 @@ describe('Breadcrumb component', () => {
       beforeEach(async () => {
         createComponent({ items, showMoreLabel: 'More...' });
         mockSmallWrapperWidth();
+        mockItemsWidths();
         await wrapper.vm.$nextTick();
       });
 
@@ -100,6 +105,7 @@ describe('Breadcrumb component', () => {
       beforeEach(async () => {
         createComponent();
         mockSmallWrapperWidth();
+        mockItemsWidths();
         await wrapper.vm.$nextTick();
       });
 
@@ -109,6 +115,53 @@ describe('Breadcrumb component', () => {
     });
   });
 
+  describe('autoResize', () => {
+    describe('by default', () => {
+      beforeEach(async () => {
+        createComponent();
+        mockSmallWrapperWidth();
+        mockItemsWidths();
+        await wrapper.vm.$nextTick();
+      });
+
+      it('moves overflowing items into dropdown', () => {
+        expect(findOverflowDropdown().exists()).toBe(true);
+        expect(findOverflowingItems().length).toBeGreaterThan(0);
+      });
+
+      it('reacts to prop changing to false', async () => {
+        expect(findOverflowDropdown().exists()).toBe(true);
+        await wrapper.setProps({ autoResize: false });
+        await wrapper.vm.$nextTick();
+        expect(findOverflowDropdown().exists()).toBe(false);
+        expect(findBreadcrumbItems().length).toEqual(items.length);
+      });
+    });
+
+    describe('when set to false', () => {
+      beforeEach(async () => {
+        createComponent({ items, autoResize: false });
+        mockSmallWrapperWidth();
+        mockItemsWidths();
+        await wrapper.vm.$nextTick();
+      });
+
+      it('keeps all items visible', () => {
+        expect(findOverflowDropdown().exists()).toBe(false);
+        expect(findBreadcrumbItems().length).toEqual(items.length);
+      });
+
+      it('reacts to prop changing to true', async () => {
+        expect(findOverflowDropdown().exists()).toBe(false);
+        await wrapper.setProps({ autoResize: true });
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick(); // otherwise test fails with VUE_VERSION=3
+        expect(findOverflowDropdown().exists()).toBe(true);
+        expect(findOverflowingItems().length).toBeGreaterThan(0);
+      });
+    });
+  });
+
   describe('avatars', () => {
     it('renders 2 avatars when 2 avatarPaths are passed', async () => {
       createComponent();
@@ -169,6 +222,7 @@ describe('Breadcrumb component', () => {
       beforeEach(async () => {
         createComponent();
         mockSmallWrapperWidth();
+        mockItemsWidths();
         await wrapper.vm.$nextTick();
       });
 

package/src/components/base/breadcrumb/breadcrumb.stories.js

@@ -7,6 +7,7 @@ const template = `
     <gl-breadcrumb
         :items="items"
         :aria-label="ariaLabel"
+        :auto-resize="autoResize"
     />
   `;
 
@@ -15,6 +16,7 @@ const collapsedTemplate = `
     <gl-breadcrumb
         :items="items"
         :aria-label="ariaLabel"
+        :auto-resize="autoResize"
     />
   </div>
 `;

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -48,6 +48,14 @@ export default {
       required: false,
       default: () => translate('GlBreadcrumb.showMoreLabel', 'Show more breadcrumbs'),
     },
+    /**
+     * Allows to disable auto-resize behavior. Items will then overflow their container instead of being collapsed into a dropdown.
+     */
+    autoResize: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     return {
@@ -89,16 +97,23 @@ export default {
       handler: 'measureAndMakeBreadcrumbsFit',
       deep: true,
     },
+    autoResize(newValue) {
+      if (newValue) this.enableAutoResize();
+      else this.disableAutoResize();
+    },
   },
   created() {
     this.debounceMakeBreadcrumbsFit = debounce(this.makeBreadcrumbsFit, 25);
   },
   mounted() {
-    window.addEventListener('resize', this.debounceMakeBreadcrumbsFit);
-    this.measureAndMakeBreadcrumbsFit();
+    if (this.autoResize) {
+      this.enableAutoResize();
+    } else {
+      this.resizeDone = true;
+    }
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.debounceMakeBreadcrumbsFit);
+    this.disableAutoResize();
   },
   methods: {
     resetItems() {
@@ -126,9 +141,9 @@ export default {
       this.resetItems();
 
       const containerWidth = this.$el.clientWidth;
-      const buttonWidth = 50; // px
+      const buttonWidth = 40; // px
 
-      if (this.totalBreadcrumbsWidth + buttonWidth > containerWidth) {
+      if (this.totalBreadcrumbsWidth > containerWidth) {
         // Not all breadcrumb items fit. Start moving items over to the dropdown.
         const startSlicingAt = 0;
 
@@ -156,6 +171,18 @@ export default {
     getAriaCurrentAttr(index) {
       return this.isLastItem(index) ? 'page' : false;
     },
+    enableAutoResize() {
+      this.resizeObserver ||= new ResizeObserver(this.debounceMakeBreadcrumbsFit);
+      this.resizeObserver.observe(this.$el);
+      this.measureAndMakeBreadcrumbsFit();
+    },
+    disableAutoResize() {
+      if (this.resizeObserver) {
+        this.resizeObserver.unobserve(this.$el);
+        this.resizeObserver = null;
+      }
+      this.resetItems();
+    },
   },
 };
 </script>

package/src/components/base/form/form_date/form_date.stories.js

@@ -1,10 +1,13 @@
+import GlFormGroup from '../form_group/form_group.vue';
 import readme from './form_date.md';
 import GlFormDate from './form_date.vue';
 
 const defaultValue = (prop) => GlFormDate.props[prop].default;
 
 const template = `
+<gl-form-group :label="labelText" :label-for="inputId">
   <gl-form-date
+    :id="inputId"
     v-model="localValue"
     :disabled="disabled"
     :min="min"
@@ -13,9 +16,12 @@ const template = `
     :max-invalid-feedback="maxInvalidFeedback"
     :readonly="readonly"
     :value="value"
-  />`;
+  />
+</gl-form-group>`;
 
 const generateProps = ({
+  inputId = 'input-id',
+  labelText = 'Label',
   disabled = false,
   min = '',
   max = '',
@@ -24,6 +30,8 @@ const generateProps = ({
   readonly = false,
   value = '',
 } = {}) => ({
+  inputId,
+  labelText,
   disabled,
   min,
   max,
@@ -34,7 +42,7 @@ const generateProps = ({
 });
 
 const Template = (args) => ({
-  components: { GlFormDate },
+  components: { GlFormDate, GlFormGroup },
   props: Object.keys(args),
   watch: {
     value(newValue) {

package/src/components/base/pagination/pagination.vue

@@ -379,6 +379,7 @@ export default {
     <ul class="pagination" :class="wrapperClasses">
       <li
         class="page-item"
+        data-testid="page-item"
         :class="{
           disabled: prevPageIsDisabled,
           'flex-fill': isFillAlign,
@@ -387,6 +388,7 @@ export default {
       >
         <component
           :is="prevPageIsDisabled ? 'span' : 'a'"
+          data-testid="page-link"
           class="gl-link page-link prev-page-item gl-display-flex"
           :aria-label="prevPageAriaLabel"
           :href="prevPageHref"
@@ -408,6 +410,7 @@ export default {
         v-for="item in visibleItems"
         :key="item.key"
         class="page-item"
+        data-testid="page-item"
         :class="{
           disabled: item.disabled,
           'flex-fill': isFillAlign,
@@ -415,6 +418,7 @@ export default {
       >
         <component
           :is="item.component"
+          data-testid="page-link"
           size="md"
           :aria-disabled="item.disabled"
           class="page-link"
@@ -442,6 +446,7 @@ export default {
 
       <li
         class="page-item"
+        data-testid="page-item"
         :class="{
           disabled: nextPageIsDisabled,
           'flex-fill': isFillAlign,
@@ -450,6 +455,7 @@ export default {
       >
         <component
           :is="nextPageIsDisabled ? 'span' : 'a'"
+          data-testid="page-link"
           class="gl-link page-link next-page-item gl-display-flex"
           :aria-label="nextPageAriaLabel"
           :href="nextPageHref"

package/src/tokens/text.dark.tokens.json

@@ -3,17 +3,61 @@
     "primary": {
       "$value": "#ececef",
       "$type": "color",
+      "$description": "Use text.color.strong instead",
+      "deprecated": true,
       "themeable": true
     },
     "secondary": {
       "$value": "#89888d",
       "$type": "color",
+      "$description": "Use text.color.subtle instead",
+      "deprecated": true,
       "themeable": true
     },
     "tertiary": {
       "$value": "#737278",
       "$type": "color",
+      "$description": "Use text.color.disabled instead",
+      "deprecated": true,
       "themeable": true
+    },
+    "color": {
+      "default": {
+        "$value": "#ececef",
+        "$type": "color",
+        "$description": "Used for the default text color.",
+        "themeable": true
+      },
+      "subtle": {
+        "$value": "#bfbfc3",
+        "$type": "color",
+        "$description": "Used for supplemental text that doesn't need to be as prominent as other text.",
+        "themeable": true
+      },
+      "strong": {
+        "$value": "#fff",
+        "$type": "color",
+        "$description": "Used for text with the highest contrast.",
+        "themeable": true
+      },
+      "heading": {
+        "$value": "#fff",
+        "$type": "color",
+        "$description": "Used for headings level 1-6.",
+        "themeable": true
+      },
+      "link": {
+        "$value": "#63a6e9",
+        "$type": "color",
+        "$description": "Used for default text links.",
+        "themeable": true
+      },
+      "disabled": {
+        "$value": "#89888d",
+        "$type": "color",
+        "$description": "Used for disabled text.",
+        "themeable": true
+      }
     }
   }
 }