Navigation Menu

Skip to content

Commit

Permalink
feat(components): add ability to emit custom properties (#3033)
Browse files Browse the repository at this point in the history 
* chore: check-in work

* chore(colors,themes): remove custom properties from colors

* chore(docs): commit generated files

* chore(themes): format file

* chore(themes): add sassdoc info and check-in built files

* chore(project): sync generated files

* docs(components): check-in generated files
  • Loading branch information
@joshblack
joshblack committed Jun 21, 2019
1 parent e4923a1 commit 4f4aa80
Show file tree
Hide file tree
Showing 12 changed files with 485 additions and 18 deletions.
70 changes: 66 additions & 4 deletions packages/components/docs/sass.md
View file
Expand Up @@ -3642,7 +3642,7 @@ Define theme variables from a map of tokens
<summary>Source code</summary>

```scss
@mixin carbon--theme($theme: $carbon--theme) {
@mixin carbon--theme($theme: $carbon--theme, $emit-custom-properties: false) {
$interactive-01: map-get($theme, 'interactive-01') !global;
$interactive-02: map-get($theme, 'interactive-02') !global;
$interactive-03: map-get($theme, 'interactive-03') !global;
Expand Down Expand Up @@ -3702,6 +3702,67 @@ Define theme variables from a map of tokens
$active-01: map-get($theme, 'active-01') !global;
$hover-field: map-get($theme, 'hover-field') !global;

@if $emit-custom-properties == true {
--interactive-01: #{map-get($theme, 'interactive-01')};
--interactive-02: #{map-get($theme, 'interactive-02')};
--interactive-03: #{map-get($theme, 'interactive-03')};
--interactive-04: #{map-get($theme, 'interactive-04')};
--ui-background: #{map-get($theme, 'ui-background')};
--ui-01: #{map-get($theme, 'ui-01')};
--ui-02: #{map-get($theme, 'ui-02')};
--ui-03: #{map-get($theme, 'ui-03')};
--ui-04: #{map-get($theme, 'ui-04')};
--ui-05: #{map-get($theme, 'ui-05')};
--text-01: #{map-get($theme, 'text-01')};
--text-02: #{map-get($theme, 'text-02')};
--text-03: #{map-get($theme, 'text-03')};
--text-04: #{map-get($theme, 'text-04')};
--icon-01: #{map-get($theme, 'icon-01')};
--icon-02: #{map-get($theme, 'icon-02')};
--icon-03: #{map-get($theme, 'icon-03')};
--link-01: #{map-get($theme, 'link-01')};
--field-01: #{map-get($theme, 'field-01')};
--field-02: #{map-get($theme, 'field-02')};
--inverse-01: #{map-get($theme, 'inverse-01')};
--inverse-02: #{map-get($theme, 'inverse-02')};
--support-01: #{map-get($theme, 'support-01')};
--support-02: #{map-get($theme, 'support-02')};
--support-03: #{map-get($theme, 'support-03')};
--support-04: #{map-get($theme, 'support-04')};
--inverse-support-01: #{map-get($theme, 'inverse-support-01')};
--inverse-support-02: #{map-get($theme, 'inverse-support-02')};
--inverse-support-03: #{map-get($theme, 'inverse-support-03')};
--inverse-support-04: #{map-get($theme, 'inverse-support-04')};
--overlay-01: #{map-get($theme, 'overlay-01')};
--focus: #{map-get($theme, 'focus')};
--hover-primary: #{map-get($theme, 'hover-primary')};
--active-primary: #{map-get($theme, 'active-primary')};
--hover-primary-text: #{map-get($theme, 'hover-primary-text')};
--hover-secondary: #{map-get($theme, 'hover-secondary')};
--active-secondary: #{map-get($theme, 'active-secondary')};
--hover-tertiary: #{map-get($theme, 'hover-tertiary')};
--active-tertiary: #{map-get($theme, 'active-tertiary')};
--hover-ui: #{map-get($theme, 'hover-ui')};
--active-ui: #{map-get($theme, 'active-ui')};
--selected-ui: #{map-get($theme, 'selected-ui')};
--hover-selected-ui: #{map-get($theme, 'hover-selected-ui')};
--hover-danger: #{map-get($theme, 'hover-danger')};
--active-danger: #{map-get($theme, 'active-danger')};
--hover-row: #{map-get($theme, 'hover-row')};
--visited-link: #{map-get($theme, 'visited-link')};
--disabled-01: #{map-get($theme, 'disabled-01')};
--disabled-02: #{map-get($theme, 'disabled-02')};
--disabled-03: #{map-get($theme, 'disabled-03')};
--highlight: #{map-get($theme, 'highlight')};
--skeleton-01: #{map-get($theme, 'skeleton-01')};
--skeleton-02: #{map-get($theme, 'skeleton-02')};
--brand-01: #{map-get($theme, 'brand-01')};
--brand-02: #{map-get($theme, 'brand-02')};
--brand-03: #{map-get($theme, 'brand-03')};
--active-01: #{map-get($theme, 'active-01')};
--hover-field: #{map-get($theme, 'hover-field')};
}

@content;
// Reset to default theme after apply in content
@if $theme != $carbon--theme {
Expand All @@ -3714,9 +3775,10 @@ Define theme variables from a map of tokens

- **Parameters**:

| Name | Description | Type | Default value |
| -------- | ------------------- | ----- | ---------------- |
| `$theme` | Map of theme tokens | `Map` | `$carbon--theme` |
| Name | Description | Type | Default value |
| ------------------------- | --------------------------------------------- | ------ | ---------------- |
| `$theme` | Map of theme tokens | `Map` | `$carbon--theme` |
| `$emit-custom-properties` | Output CSS Custom Properties for theme tokens | `Bool` | `false` |

**Example**:

Expand Down
64 changes: 63 additions & 1 deletion packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss
View file
Expand Up @@ -9,6 +9,7 @@
/// Define theme variables from a map of tokens
/// @access public
/// @param {Map} $theme [$carbon--theme] - Map of theme tokens
/// @param {Bool} $emit-custom-properties [false] - Output CSS Custom Properties for theme tokens
/// @content Pass in your custom declaration blocks to be used after the token maps set theming variables.
///
/// @example scss
Expand All @@ -28,7 +29,7 @@
/// }
///
/// @group @carbon/themes
@mixin carbon--theme($theme: $carbon--theme) {
@mixin carbon--theme($theme: $carbon--theme, $emit-custom-properties: false) {
$interactive-01: map-get($theme, 'interactive-01') !global;
$interactive-02: map-get($theme, 'interactive-02') !global;
$interactive-03: map-get($theme, 'interactive-03') !global;
Expand Down Expand Up @@ -88,6 +89,67 @@
$active-01: map-get($theme, 'active-01') !global;
$hover-field: map-get($theme, 'hover-field') !global;

@if $emit-custom-properties == true {
--interactive-01: #{map-get($theme, 'interactive-01')};
--interactive-02: #{map-get($theme, 'interactive-02')};
--interactive-03: #{map-get($theme, 'interactive-03')};
--interactive-04: #{map-get($theme, 'interactive-04')};
--ui-background: #{map-get($theme, 'ui-background')};
--ui-01: #{map-get($theme, 'ui-01')};
--ui-02: #{map-get($theme, 'ui-02')};
--ui-03: #{map-get($theme, 'ui-03')};
--ui-04: #{map-get($theme, 'ui-04')};
--ui-05: #{map-get($theme, 'ui-05')};
--text-01: #{map-get($theme, 'text-01')};
--text-02: #{map-get($theme, 'text-02')};
--text-03: #{map-get($theme, 'text-03')};
--text-04: #{map-get($theme, 'text-04')};
--icon-01: #{map-get($theme, 'icon-01')};
--icon-02: #{map-get($theme, 'icon-02')};
--icon-03: #{map-get($theme, 'icon-03')};
--link-01: #{map-get($theme, 'link-01')};
--field-01: #{map-get($theme, 'field-01')};
--field-02: #{map-get($theme, 'field-02')};
--inverse-01: #{map-get($theme, 'inverse-01')};
--inverse-02: #{map-get($theme, 'inverse-02')};
--support-01: #{map-get($theme, 'support-01')};
--support-02: #{map-get($theme, 'support-02')};
--support-03: #{map-get($theme, 'support-03')};
--support-04: #{map-get($theme, 'support-04')};
--inverse-support-01: #{map-get($theme, 'inverse-support-01')};
--inverse-support-02: #{map-get($theme, 'inverse-support-02')};
--inverse-support-03: #{map-get($theme, 'inverse-support-03')};
--inverse-support-04: #{map-get($theme, 'inverse-support-04')};
--overlay-01: #{map-get($theme, 'overlay-01')};
--focus: #{map-get($theme, 'focus')};
--hover-primary: #{map-get($theme, 'hover-primary')};
--active-primary: #{map-get($theme, 'active-primary')};
--hover-primary-text: #{map-get($theme, 'hover-primary-text')};
--hover-secondary: #{map-get($theme, 'hover-secondary')};
--active-secondary: #{map-get($theme, 'active-secondary')};
--hover-tertiary: #{map-get($theme, 'hover-tertiary')};
--active-tertiary: #{map-get($theme, 'active-tertiary')};
--hover-ui: #{map-get($theme, 'hover-ui')};
--active-ui: #{map-get($theme, 'active-ui')};
--selected-ui: #{map-get($theme, 'selected-ui')};
--hover-selected-ui: #{map-get($theme, 'hover-selected-ui')};
--hover-danger: #{map-get($theme, 'hover-danger')};
--active-danger: #{map-get($theme, 'active-danger')};
--hover-row: #{map-get($theme, 'hover-row')};
--visited-link: #{map-get($theme, 'visited-link')};
--disabled-01: #{map-get($theme, 'disabled-01')};
--disabled-02: #{map-get($theme, 'disabled-02')};
--disabled-03: #{map-get($theme, 'disabled-03')};
--highlight: #{map-get($theme, 'highlight')};
--skeleton-01: #{map-get($theme, 'skeleton-01')};
--skeleton-02: #{map-get($theme, 'skeleton-02')};
--brand-01: #{map-get($theme, 'brand-01')};
--brand-02: #{map-get($theme, 'brand-02')};
--brand-03: #{map-get($theme, 'brand-03')};
--active-01: #{map-get($theme, 'active-01')};
--hover-field: #{map-get($theme, 'hover-field')};
}

@content;
// Reset to default theme after apply in content
@if $theme != $carbon--theme {
Expand Down
64 changes: 63 additions & 1 deletion packages/components/src/globals/scss/vendor/@carbon/themes/scss/_mixins.scss
View file
Expand Up @@ -9,6 +9,7 @@
/// Define theme variables from a map of tokens
/// @access public
/// @param {Map} $theme [$carbon--theme] - Map of theme tokens
/// @param {Bool} $emit-custom-properties [false] - Output CSS Custom Properties for theme tokens
/// @content Pass in your custom declaration blocks to be used after the token maps set theming variables.
///
/// @example scss
Expand All @@ -28,7 +29,7 @@
/// }
///
/// @group @carbon/themes
@mixin carbon--theme($theme: $carbon--theme) {
@mixin carbon--theme($theme: $carbon--theme, $emit-custom-properties: false) {
$interactive-01: map-get($theme, 'interactive-01') !global;
$interactive-02: map-get($theme, 'interactive-02') !global;
$interactive-03: map-get($theme, 'interactive-03') !global;
Expand Down Expand Up @@ -88,6 +89,67 @@
$active-01: map-get($theme, 'active-01') !global;
$hover-field: map-get($theme, 'hover-field') !global;

@if $emit-custom-properties == true {
--interactive-01: #{map-get($theme, 'interactive-01')};
--interactive-02: #{map-get($theme, 'interactive-02')};
--interactive-03: #{map-get($theme, 'interactive-03')};
--interactive-04: #{map-get($theme, 'interactive-04')};
--ui-background: #{map-get($theme, 'ui-background')};
--ui-01: #{map-get($theme, 'ui-01')};
--ui-02: #{map-get($theme, 'ui-02')};
--ui-03: #{map-get($theme, 'ui-03')};
--ui-04: #{map-get($theme, 'ui-04')};
--ui-05: #{map-get($theme, 'ui-05')};
--text-01: #{map-get($theme, 'text-01')};
--text-02: #{map-get($theme, 'text-02')};
--text-03: #{map-get($theme, 'text-03')};
--text-04: #{map-get($theme, 'text-04')};
--icon-01: #{map-get($theme, 'icon-01')};
--icon-02: #{map-get($theme, 'icon-02')};
--icon-03: #{map-get($theme, 'icon-03')};
--link-01: #{map-get($theme, 'link-01')};
--field-01: #{map-get($theme, 'field-01')};
--field-02: #{map-get($theme, 'field-02')};
--inverse-01: #{map-get($theme, 'inverse-01')};
--inverse-02: #{map-get($theme, 'inverse-02')};
--support-01: #{map-get($theme, 'support-01')};
--support-02: #{map-get($theme, 'support-02')};
--support-03: #{map-get($theme, 'support-03')};
--support-04: #{map-get($theme, 'support-04')};
--inverse-support-01: #{map-get($theme, 'inverse-support-01')};
--inverse-support-02: #{map-get($theme, 'inverse-support-02')};
--inverse-support-03: #{map-get($theme, 'inverse-support-03')};
--inverse-support-04: #{map-get($theme, 'inverse-support-04')};
--overlay-01: #{map-get($theme, 'overlay-01')};
--focus: #{map-get($theme, 'focus')};
--hover-primary: #{map-get($theme, 'hover-primary')};
--active-primary: #{map-get($theme, 'active-primary')};
--hover-primary-text: #{map-get($theme, 'hover-primary-text')};
--hover-secondary: #{map-get($theme, 'hover-secondary')};
--active-secondary: #{map-get($theme, 'active-secondary')};
--hover-tertiary: #{map-get($theme, 'hover-tertiary')};
--active-tertiary: #{map-get($theme, 'active-tertiary')};
--hover-ui: #{map-get($theme, 'hover-ui')};
--active-ui: #{map-get($theme, 'active-ui')};
--selected-ui: #{map-get($theme, 'selected-ui')};
--hover-selected-ui: #{map-get($theme, 'hover-selected-ui')};
--hover-danger: #{map-get($theme, 'hover-danger')};
--active-danger: #{map-get($theme, 'active-danger')};
--hover-row: #{map-get($theme, 'hover-row')};
--visited-link: #{map-get($theme, 'visited-link')};
--disabled-01: #{map-get($theme, 'disabled-01')};
--disabled-02: #{map-get($theme, 'disabled-02')};
--disabled-03: #{map-get($theme, 'disabled-03')};
--highlight: #{map-get($theme, 'highlight')};
--skeleton-01: #{map-get($theme, 'skeleton-01')};
--skeleton-02: #{map-get($theme, 'skeleton-02')};
--brand-01: #{map-get($theme, 'brand-01')};
--brand-02: #{map-get($theme, 'brand-02')};
--brand-03: #{map-get($theme, 'brand-03')};
--active-01: #{map-get($theme, 'active-01')};
--hover-field: #{map-get($theme, 'hover-field')};
}

@content;
// Reset to default theme after apply in content
@if $theme != $carbon--theme {
Expand Down
70 changes: 66 additions & 4 deletions packages/elements/docs/sass.md
View file
Expand Up @@ -3291,7 +3291,7 @@ Define theme variables from a map of tokens
<summary>Source code</summary>

```scss
@mixin carbon--theme($theme: $carbon--theme) {
@mixin carbon--theme($theme: $carbon--theme, $emit-custom-properties: false) {
$interactive-01: map-get($theme, 'interactive-01') !global;
$interactive-02: map-get($theme, 'interactive-02') !global;
$interactive-03: map-get($theme, 'interactive-03') !global;
Expand Down Expand Up @@ -3351,6 +3351,67 @@ Define theme variables from a map of tokens
$active-01: map-get($theme, 'active-01') !global;
$hover-field: map-get($theme, 'hover-field') !global;

@if $emit-custom-properties == true {
--interactive-01: #{map-get($theme, 'interactive-01')};
--interactive-02: #{map-get($theme, 'interactive-02')};
--interactive-03: #{map-get($theme, 'interactive-03')};
--interactive-04: #{map-get($theme, 'interactive-04')};
--ui-background: #{map-get($theme, 'ui-background')};
--ui-01: #{map-get($theme, 'ui-01')};
--ui-02: #{map-get($theme, 'ui-02')};
--ui-03: #{map-get($theme, 'ui-03')};
--ui-04: #{map-get($theme, 'ui-04')};
--ui-05: #{map-get($theme, 'ui-05')};
--text-01: #{map-get($theme, 'text-01')};
--text-02: #{map-get($theme, 'text-02')};
--text-03: #{map-get($theme, 'text-03')};
--text-04: #{map-get($theme, 'text-04')};
--icon-01: #{map-get($theme, 'icon-01')};
--icon-02: #{map-get($theme, 'icon-02')};
--icon-03: #{map-get($theme, 'icon-03')};
--link-01: #{map-get($theme, 'link-01')};
--field-01: #{map-get($theme, 'field-01')};
--field-02: #{map-get($theme, 'field-02')};
--inverse-01: #{map-get($theme, 'inverse-01')};
--inverse-02: #{map-get($theme, 'inverse-02')};
--support-01: #{map-get($theme, 'support-01')};
--support-02: #{map-get($theme, 'support-02')};
--support-03: #{map-get($theme, 'support-03')};
--support-04: #{map-get($theme, 'support-04')};
--inverse-support-01: #{map-get($theme, 'inverse-support-01')};
--inverse-support-02: #{map-get($theme, 'inverse-support-02')};
--inverse-support-03: #{map-get($theme, 'inverse-support-03')};
--inverse-support-04: #{map-get($theme, 'inverse-support-04')};
--overlay-01: #{map-get($theme, 'overlay-01')};
--focus: #{map-get($theme, 'focus')};
--hover-primary: #{map-get($theme, 'hover-primary')};
--active-primary: #{map-get($theme, 'active-primary')};
--hover-primary-text: #{map-get($theme, 'hover-primary-text')};
--hover-secondary: #{map-get($theme, 'hover-secondary')};
--active-secondary: #{map-get($theme, 'active-secondary')};
--hover-tertiary: #{map-get($theme, 'hover-tertiary')};
--active-tertiary: #{map-get($theme, 'active-tertiary')};
--hover-ui: #{map-get($theme, 'hover-ui')};
--active-ui: #{map-get($theme, 'active-ui')};
--selected-ui: #{map-get($theme, 'selected-ui')};
--hover-selected-ui: #{map-get($theme, 'hover-selected-ui')};
--hover-danger: #{map-get($theme, 'hover-danger')};
--active-danger: #{map-get($theme, 'active-danger')};
--hover-row: #{map-get($theme, 'hover-row')};
--visited-link: #{map-get($theme, 'visited-link')};
--disabled-01: #{map-get($theme, 'disabled-01')};
--disabled-02: #{map-get($theme, 'disabled-02')};
--disabled-03: #{map-get($theme, 'disabled-03')};
--highlight: #{map-get($theme, 'highlight')};
--skeleton-01: #{map-get($theme, 'skeleton-01')};
--skeleton-02: #{map-get($theme, 'skeleton-02')};
--brand-01: #{map-get($theme, 'brand-01')};
--brand-02: #{map-get($theme, 'brand-02')};
--brand-03: #{map-get($theme, 'brand-03')};
--active-01: #{map-get($theme, 'active-01')};
--hover-field: #{map-get($theme, 'hover-field')};
}

@content;
// Reset to default theme after apply in content
@if $theme != $carbon--theme {
Expand All @@ -3363,9 +3424,10 @@ Define theme variables from a map of tokens

- **Parameters**:

| Name | Description | Type | Default value |
| -------- | ------------------- | ----- | ---------------- |
| `$theme` | Map of theme tokens | `Map` | `$carbon--theme` |
| Name | Description | Type | Default value |
| ------------------------- | --------------------------------------------- | ------ | ---------------- |
| `$theme` | Map of theme tokens | `Map` | `$carbon--theme` |
| `$emit-custom-properties` | Output CSS Custom Properties for theme tokens | `Bool` | `false` |

**Example**:

Expand Down
9 changes: 7 additions & 2 deletions packages/scss-generator/src/types/definitions.js
View file
Expand Up @@ -372,14 +372,19 @@ const Declaration = defineType('Declaration', {
validate: assertValueType('string'),
},
value: {
validate: assertValueType('string'),
validate: () =>
assertOneOf([assertValueType('string'), assertType(CallExpression)]),
},
},
generate(printer, node) {
printer.token(node.property);
printer.token(':');
printer.space();
printer.token(node.value);
if (typeof node.value === 'string') {
printer.token(node.value);
} else {
printer.print(node.value);
}
printer.token(';');
},
});
Expand Down

0 comments on commit 4f4aa80

Please sign in to comment.