Skip to content

Commit

Permalink
feat(patterns)!: theme level patterns, removes mheading, renames CSS …
Browse files Browse the repository at this point in the history 
…vars (#320)

* feat!: user-defined theme variants for mtext & mbutton (#278)

* feat(text)!: theme variants

* refactor(heading)!: removes heading component after merging it into text component

* refactor!: changes mtext theme defaults & theme prop resolution algo

* docs(text): variant docs

* feat(button)!: user defined theme variants

* docs: fix headings in beta advanced lab demo (#284)

* fix!: typography defaults (#285)

* fix!: typography defaults

* docs: theme lab typo controls (#286)

* docs: adds basic typography controls to ThemeTest lab

* docs: adds typography variants controls to ThemeTest lab

* docs: moves typography controls to top of themetest lab

* fix(theme): 0 values now resolve correctly (#287)

* fix!: renames global 'variants' to 'patterns' to avoid name collision with local 'variant' props (#293)

* feat!: theme font family weight internally (#289)

* feat(input): theme input component text style

* feat(textarea): themes textarea text style

* feat(actionbarbutton): themes actionbarbutton's text style

* feat(button): themes button text style

* feat(calendar): themes calendar text styles

* feat(choice): themes Choice text style

* feat(container): themes container's label & content text styles

* docs: more spacing in ThemeTest lab

* feat(notice): themes notice's text content

* feat(pininput): themes pininput text content

* feat: themes SegmentedControl & Select text content

* feat(stepper): themes stepper text content

* feat(textbutton): themes textbutton's text content

* feat: themes labels & sublabels in inline form controls

* fix(container): fixes which global text styles are applied to container

* docs: adds title family & weight to ThemeTest lab

* feat: themes text content in Blades, Dialogs, Modals

* fix: headlines have same font family as titles

* fix: themed colors for Calendar, Container, & Inline Form components

* refactor!: renames heading & body colors to title & paragraph

* fix: title & paragraph color theming

* fix: label default theme

* feat: more typography css inheritance

* docs: updates ThemeTest docs & Text docs

* refactor: minimizes paragraph css in calendar

* refactor: minimizes css styles in container

* refactor: minimizes typo css in modal, dialog, blade

* refactor: minimizes typo css in input

* refactor: minimizes typo css in notice

* refactor: minimizes typo css in select

* refactor: minimizes typo css in inline form controls

* docs: updates variants to patterns

* refactor!: prefix public css vars (#305)

* refactor!: prefix public css vars

* docs: update themes lab to use public css var

* refactor!: removes unnecessary color prefix on vars (#307)

* refactor!: some font-related config renames (#311)

* refactor!: renames font-related color, family, & weight vars

* docs(theme): updates after font-related var renames

* docs(themetest): updates themetest lab after font-related var renames

* docs: adds table of reusable theme vars to theme docs

* refactor!: rename css vars again

* docs: update themes lab colors theme object

* docs: more Themes lab fixes

* docs: finally fixes Themes lab
  • Loading branch information
@pretzelhammer
pretzelhammer authored May 11, 2022
1 parent f29303d commit f6376aa
Show file tree
Hide file tree
Showing 61 changed files with 1,146 additions and 1,203 deletions.
140 changes: 0 additions & 140 deletions lab/experiments/FluidScale.vue
View file

This file was deleted.

124 changes: 85 additions & 39 deletions lab/experiments/KitchenSink.vue
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
<template>
<div class="page">
<m-heading :size="4">
<m-text
pattern="title"
:size="4"
>
Kitchen Sink
</m-heading>
</m-text>

<div class="section">
<m-heading :size="2">
<m-text
pattern="title"
:size="2"
>
Button
</m-heading>
</m-text>
<m-button>
Button
</m-button>
Expand Down Expand Up @@ -83,9 +89,12 @@
</div>

<div class="section">
<m-heading :size="2">
<m-text
pattern="title"
:size="2"
>
Checkbox
</m-heading>
</m-text>
<m-checkbox>
checkbox
</m-checkbox>
Expand All @@ -104,31 +113,40 @@
</div>

<div class="section">
<m-heading :size="2">
<m-text
pattern="title"
:size="2"
>
Divider
</m-heading>
</m-text>

<m-divider />
</div>

<div class="section">
<m-heading :size="2">
Heading
</m-heading>
<m-text
pattern="title"
:size="2"
>
Text
</m-text>

<m-heading
<m-text
v-for="size in [-2, -1, 0, 1, 2, 3, 4, 5, 6, 7]"
:key="`heading-${size}`"
:key="size"
:size="size"
>
Size {{ size }}
</m-heading>
Text Size {{ size }}
</m-text>
</div>

<div class="section">
<m-heading :size="2">
<m-text
pattern="title"
:size="2"
>
Image
</m-heading>
</m-text>

<m-image
class="square"
Expand All @@ -137,9 +155,12 @@
</div>

<div class="section">
<m-heading :size="2">
<m-text
pattern="title"
:size="2"
>
Input
</m-heading>
</m-text>

<m-input placeholder="placeholder" />
<m-input
Expand Down Expand Up @@ -190,17 +211,23 @@
</div>

<div class="section">
<m-heading :size="2">
<m-text
pattern="title"
:size="2"
>
Loading
</m-heading>
</m-text>

<m-loading />
</div>

<div class="section">
<m-heading :size="2">
<m-text
pattern="title"
:size="2"
>
Notice
</m-heading>
</m-text>

<m-notice type="error">
I am an error notice
Expand Down Expand Up @@ -241,9 +268,12 @@
</div>

<div class="section">
<m-heading :size="2">
<m-text
pattern="title"
:size="2"
>
Radio
</m-heading>
</m-text>

<m-radio value="1">
radio
Expand All @@ -269,9 +299,12 @@
</div>

<div class="section">
<m-heading :size="2">
<m-text
pattern="title"
:size="2"
>
Select
</m-heading>
</m-text>

<m-select
v-model="currentOption"
Expand Down Expand Up @@ -304,27 +337,36 @@
</div>

<div class="section">
<m-heading :size="2">
<m-text
pattern="title"
:size="2"
>
Skeleton
</m-heading>
</m-text>

<m-skeleton-block class="square" />

<m-skeleton-text :lines="3" />
</div>

<div class="section">
<m-heading :size="2">
<m-text
pattern="title"
:size="2"
>
Stepper
</m-heading>
</m-text>

<m-stepper v-model="number" />
</div>

<div class="section">
<m-heading :size="2">
<m-text
pattern="title"
:size="2"
>
Text
</m-heading>
</m-text>

<m-text
v-for="size in [-1, 0, 1]"
Expand All @@ -336,9 +378,12 @@
</div>

<div class="section">
<m-heading :size="2">
<m-text
pattern="title"
:size="2"
>
Textarea
</m-heading>
</m-text>

<m-textarea placeholder="placeholder" />
<m-textarea
Expand All @@ -363,9 +408,12 @@
</div>

<div class="section">
<m-heading :size="2">
<m-text
pattern="title"
:size="2"
>
Toggle
</m-heading>
</m-text>

<m-toggle>
toggle
Expand All @@ -390,7 +438,6 @@
import { MButton } from '@square/maker/components/Button';
import { MCheckbox } from '@square/maker/components/Checkbox';
import { MDivider } from '@square/maker/components/Divider';
import { MHeading } from '@square/maker/components/Heading';
import { MImage } from '@square/maker/components/Image';
import { MInput } from '@square/maker/components/Input';
import { MLoading } from '@square/maker/components/Loading';
Expand All @@ -412,7 +459,6 @@ export default {
MButton,
MCheckbox,
MDivider,
MHeading,
MImage,
MInput,
MLoading,
Expand Down
Loading

0 comments on commit f6376aa

Please # to comment.